Merge pull request #37 from reaviz/syang/new-session-focus

#30 update Reablocks, fix focus on session change
reaviz · Aug 13, 2024 · 5f4f414 · 5f4f414
2 parents b3662c8 + 3e1f0d6
commit 5f4f414
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "framer-motion": "^10.16.16",
     "katex": "^0.16.11",
     "mdast-util-find-and-replace": "^3.0.1",
-    "reablocks": "^8.4.0",
+    "reablocks": "^8.4.7",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "reakeys": "^2.0.3",

diff --git a/src/ChatInput/ChatInput.tsx b/src/ChatInput/ChatInput.tsx
@@ -1,13 +1,13 @@
 import {
-  FC,
   useState,
   KeyboardEvent,
   ReactElement,
   useRef,
   ChangeEvent,
   useContext,
   forwardRef,
-  useImperativeHandle
+  useImperativeHandle,
+  useEffect
 } from 'react';
 import { Button, Textarea, cn } from 'reablocks';
 import SendIcon from '@/assets/send.svg?react';
@@ -62,11 +62,17 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(({
   stopIcon = <StopIcon />,
   attachIcon
 }, ref) => {
-  const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload } =
+  const { theme, isLoading, disabled, sendMessage, stopMessage, fileUpload, activeSessionId } =
     useContext(ChatContext);
   const [message, setMessage] = useState<string>('');
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
+  useEffect(() => {
+    if(inputRef && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [activeSessionId, inputRef])
+
   useImperativeHandle(ref, () => ({
     focus: () => {
       inputRef.current?.focus();
@@ -97,7 +103,7 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(({
   return (
     <div className={cn(theme.input.base)}>
       <Textarea
-        inputRef={inputRef}
+        ref={inputRef}
         containerClassName={cn(theme.input.input)}
         minRows={1}
         autoFocus

diff --git a/stories/Console.stories.tsx b/stories/Console.stories.tsx
@@ -15,7 +15,8 @@ import {
   SessionMessagePanel,
   SessionMessagesHeader,
   ChatContext,
-  SessionMessage
+  SessionMessage,
+  Conversation
 } from '../src';
 import {
   Card,
@@ -853,7 +854,6 @@ const CustomMessageResponse: FC<any> = ({ response }) => (
 
 const CustomMessageFile: FC<any> = ({ name, type }) => (
   <Chip size="small" className="rounded-full border border-gray-700">
-    <>{console.log('boop', name, type)}</>
     {name || type}
   </Chip>
 );
@@ -1093,3 +1093,106 @@ export const ImageFiles = () => {
     </div>
   );
 };
+
+export const Working = () => {
+  const [activeId, setActiveId] = useState<string>();
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [count, setCount] = useState<number>(sessions.length + 1);
+
+  const handleNewSession = () => {
+    const newId = count.toLocaleString();
+    setSessions([
+      ...sessions,
+      {
+        id: newId,
+        title: `New Session #${newId}`,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        conversations: []
+      }
+    ]);
+    setActiveId(newId);
+    setCount(count + 1);
+  };
+
+  const handleDelete = (id: string) => {
+    const updated = sessions.filter(s => s.id !== id);
+    setSessions([...updated]);
+  };
+
+  const handleNewMessage = (message: string) => {
+    setLoading(true);
+    const curr = sessions.find(s => s.id === activeId);
+    if (curr) {
+      const newMessage: Conversation = {
+        id: `${curr.id}-${curr.conversations.length}`,
+        question: message,
+        response: 'this is an example response',
+        createdAt: new Date(),
+        updatedAt: new Date()
+      };
+      const updated = {
+        ...curr,
+        conversations: [...curr.conversations, newMessage]
+      };
+      setSessions([...sessions.filter(s => s.id !== activeId), updated]);
+    } else {
+      const newId = '1';
+      const newSession: Session = {
+        id: newId,
+        title: message.length > 28 ? `${message.substring(0, 25)}...` : message,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        conversations: [
+          {
+            id: `${newId}-1`,
+            question: message,
+            response: 'this is an example response',
+            createdAt: new Date(),
+            updatedAt: new Date()
+          }
+        ]
+      };
+      setSessions([newSession]);
+      setActiveId(newId);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div
+      className="dark:bg-gray-950 bg-white"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        padding: 20,
+        margin: 20,
+        borderRadius: 5
+      }}
+    >
+      <Chat
+        sessions={sessions}
+        activeSessionId={activeId}
+        isLoading={loading}
+        onNewSession={handleNewSession}
+        onSelectSession={setActiveId}
+        onDeleteSession={handleDelete}
+        onSendMessage={handleNewMessage}
+      >
+        <SessionsList>
+          <NewSessionButton />
+          <SessionGroups />
+        </SessionsList>
+        <SessionMessagePanel>
+          <SessionMessagesHeader />
+          <SessionMessages />
+          <ChatInput />
+        </SessionMessagePanel>
+      </Chat>
+    </div>
+  );
+};