more improvements

Author: amcdnl

.eslintrc.cjs

@@ -31,6 +31,7 @@ module.exports = {
     }
   }],
   'rules': {
+    'arrow-body-style': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/display-name': 'off',
     'no-unused-vars': [0],
@@ -42,7 +43,6 @@ module.exports = {
     'no-relative-import-paths/no-relative-import-paths': [
       'warn',
       { 'allowSameFolder': true, 'prefix': '@', 'rootDir': 'src' }
-    ],
-    'arrow-body-style': ['warn', 'as-needed'],
+    ]
   }
 };

src/SessionListItem.tsx

@@ -16,6 +16,7 @@ export const SessionListItem: FC<SessionListItemProps> = ({
   onDeleteSession
 }) => (
   <ListItem
+    disableGutters
     active={isActive}
     className="mb-4"
     onClick={() => onSelectSession && onSelectSession(session.id)}

src/Sessions.tsx

@@ -116,6 +116,7 @@ export const Sessions: FC<SessionsProps> = ({
         <>
           <SessionsList
             sessions={sessions}
+            theme={theme}
             activeSessionId={activeSessionId}
             onSelectSession={onSelectSession}
             onDeleteSession={onDeleteSession}

src/SessionsList.tsx

@@ -1,31 +1,34 @@
 import { FC } from 'react';
 import { SessionListItem } from './SessionListItem';
 import { Session } from './types';
-import { List, ListItem, Button } from 'reablocks';
+import { List, ListItem, Button, cn } from 'reablocks';
+import { ChatTheme } from './theme';
 
 interface SessionsListProps {
   sessions: Session[];
   activeSessionId?: string;
   className?: string;
+  theme?: ChatTheme;
   onSelectSession?: (sessionId: string) => void;
   onDeleteSession?: (sessionId: string) => void;
   onCreateNewSession?: () => void;
 }
 
 export const SessionsList: FC<SessionsListProps> = ({
   sessions,
+  theme,
   className,
   activeSessionId,
   onSelectSession,
   onDeleteSession,
   onCreateNewSession
 }) => {
   return (
-    <List className={className}>
-      <ListItem>
+    <List className={cn(theme.list.base, className)}>
+      <ListItem disableGutters>
         <Button
           fullWidth
-          className="mb-4 px-4 py-2"
+          className={cn('mb-4', theme.list.create)}
           onClick={onCreateNewSession}
         >
           Create New Session

src/theme.ts

@@ -1,7 +1,15 @@
 export interface ChatTheme {
   base: string;
+  list: {
+    base: string;
+    create: string;
+  }
 }
 
 export const chatTheme: ChatTheme = {
-  base: ''
+  base: '',
+  list: {
+    base: '',
+    create: ''
+  }
 };

src/useLlm.ts

@@ -1,8 +1,174 @@
+import { useState, useCallback } from 'react';
+import { Session, Conversation } from './types';
+
+export type LlmProvider = 'openai' | 'anthropic' | 'google';
+
 export interface LlmOptions {
-  // provider: 'openai' | 'claude' | 'gemini';
+  provider: LlmProvider;
+  apiKey: string;
+}
+
+export interface LlmResponse {
+  text: string;
+  isComplete: boolean;
 }
 
 export const useLlm = (options: LlmOptions) => {
-  // Goal of the hook is to provider a data provider wrapper
-  // for the streaming data.
+  /*
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const streamResponse = useCallback(async (
+    prompt: string,
+    onUpdate: (response: LlmResponse) => void
+  ): Promise<void> => {
+    if (!prompt.trim()) {
+      setError(new Error('Prompt cannot be empty'));
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const apiEndpoint = API_ENDPOINTS[options.provider];
+
+      let headers = {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${options.apiKey}`
+      };
+      let body: any = { prompt, stream: true };
+
+      switch (options.provider) {
+        case 'openai':
+          body = {
+            model: 'gpt-3.5-turbo',
+            messages: [{ role: 'user', content: prompt }],
+            stream: true
+          };
+          break;
+        case 'anthropic':
+          body = {
+            prompt: `Human: ${prompt}\n\nAssistant:`,
+            model: 'claude-2',
+            stream: true
+          };
+          break;
+        case 'google':
+          headers['x-goog-api-key'] = options.apiKey;
+          delete headers['Authorization'];
+          body = {
+            contents: [{ parts: [{ text: prompt }] }],
+            generationConfig: { temperature: 0.9 }
+          };
+          break;
+      }
+
+      const response = await fetch(apiEndpoint, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body)
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const reader = response.body!.getReader();
+      let accumulatedResponse = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = new TextDecoder().decode(value);
+        accumulatedResponse += chunk;
+
+        // Parse the chunk based on the provider
+        let parsedChunk = '';
+        switch (options.provider) {
+          case 'openai':
+            parsedChunk = parseOpenAIResponse(chunk);
+            break;
+          case 'anthropic':
+            parsedChunk = parseAnthropicResponse(chunk);
+            break;
+          case 'google':
+            parsedChunk = parseGoogleResponse(chunk);
+            break;
+        }
+
+        onUpdate({
+          text: accumulatedResponse,
+          isComplete: false
+        });
+      }
+
+      onUpdate({
+        text: accumulatedResponse,
+        isComplete: true
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('An error occurred'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [options]);
+
+  const sendMessage = useCallback(async (
+    session: Session,
+    message: string
+  ): Promise<Session> => {
+    const newConversation: Conversation = {
+      id: Date.now().toString(),
+      question: message,
+      response: '',
+      createdAt: new Date(),
+      updatedAt: new Date()
+    };
+
+    let updatedSession = {
+      ...session,
+      conversations: [...session.conversations, newConversation]
+    };
+
+    await streamResponse(message, (response) => {
+      newConversation.response = response.text;
+      newConversation.updatedAt = new Date();
+      updatedSession = { ...updatedSession };
+    });
+
+    return updatedSession;
+  }, [streamResponse]);
+
+  return {
+    isLoading,
+    error,
+    sendMessage
+  };
+  */
 };
+
+/*
+const API_ENDPOINTS: Record<LlmProvider, string> = {
+  openai: 'https://api.openai.com/v1/chat/completions',
+  anthropic: 'https://api.anthropic.com/v1/complete',
+  google: 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:streamGenerateContent',
+};
+
+// Helper functions to parse responses (these need to be implemented)
+function parseOpenAIResponse(chunk: string): string {
+  // Implementation needed
+  return chunk;
+}
+
+function parseAnthropicResponse(chunk: string): string {
+  // Implementation needed
+  return chunk;
+}
+
+function parseGoogleResponse(chunk: string): string {
+  // Implementation needed
+  return chunk;
+}
+*/

stories/Basic.stories.tsx

@@ -4,18 +4,9 @@ import { Sessions, SessionsProps, Session } from '../src';
 
 export default {
   title: 'Examples',
-  component: Sessions,
-  decorators: [
-    (Story) => (
-      <div style={{ width: '750px' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  component: Sessions
 } as Meta;
 
-const Template: StoryFn<SessionsProps> = (args) => <Sessions {...args} />;
-
 const fakeSessions: Session[] = [
   {
     id: '1',
@@ -39,40 +30,55 @@ const fakeSessions: Session[] = [
   },
 ];
 
-export const Console = Template.bind({});
-Console.args = {
-  viewType: 'console',
-  sessions: fakeSessions,
-  activeSessionId: '1',
-  isLoading: false,
-  onSelectSession: (sessionId: string) => console.log(`Selected session: ${sessionId}`),
-  onDeleteSession: (sessionId: string) => console.log(`Deleted session: ${sessionId}`),
-  onSendMessage: (message: string) => console.log(`Sent message: ${message}`),
-  responseTransformers: []
+export const Console = () => {
+  return (
+    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20 }}>
+      <Sessions
+        viewType="console"
+        sessions={fakeSessions}
+        activeSessionId="1"
+        isLoading={false}
+        onSelectSession={() => {}}
+        onDeleteSession={() => {}}
+        onSendMessage={() => {}}
+        responseTransformers={[]}
+      />
+    </div>
+  );
 };
 
-export const Companion = Template.bind({});
-Companion.args = {
-  viewType: 'companion',
-  sessions: fakeSessions,
-  activeSessionId: '1',
-  isLoading: false,
-  onSelectSession: (sessionId: string) => console.log(`Selected session: ${sessionId}`),
-  onDeleteSession: (sessionId: string) => console.log(`Deleted session: ${sessionId}`),
-  onSendMessage: (message: string) => console.log(`Sent message: ${message}`),
-  responseTransformers: []
+export const Companion = () => {
+  return (
+    <div style={{ width: 350 }}>
+      <Sessions
+        viewType="companion"
+        sessions={fakeSessions}
+        activeSessionId="1"
+        isLoading={false}
+        onSelectSession={() => {}}
+        onDeleteSession={() => {}}
+        onSendMessage={() => {}}
+        responseTransformers={[]}
+      />
+    </div>
+  );
 };
 
-export const ResponseTransformer = Template.bind({});
-ResponseTransformer.args = {
-  viewType: 'console',
-  sessions: fakeSessions,
-  activeSessionId: '1',
-  isLoading: false,
-  onSelectSession: (sessionId: string) => console.log(`Selected session: ${sessionId}`),
-  onDeleteSession: (sessionId: string) => console.log(`Deleted session: ${sessionId}`),
-  onSendMessage: (message: string) => console.log(`Sent message: ${message}`),
-  responseTransformers: [
-    (response, next) => next(response.toUpperCase()), // Example transformer
-  ],
+export const ResponseTransformer = () => {
+  return (
+    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+      <Sessions
+        viewType="console"
+        sessions={fakeSessions}
+        activeSessionId="1"
+        isLoading={false}
+        onSelectSession={() => {}}
+        onDeleteSession={() => {}}
+        onSendMessage={() => {}}
+        responseTransformers={[
+          (response, next) => next(response.toUpperCase())
+        ]}
+      />
+    </div>
+  );
 };