Update the imports in chatList.tsx and useChatCompletion.tsx to use t…

…he ChatRole enum from useCurrentChat instead of the old ChatRole enum from useOpenAI

src/components/Sidebar/chat/chatList.tsx

@@ -2,10 +2,10 @@ import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
 import CodeBlock from './markdown-components/CodeBlock'
 import remarkGfm from 'remark-gfm'
 import { useEffect, useRef } from 'react'
-import { ChatMessage, ChatRole } from '../../../hooks/useOpenAI'
 import { Table } from './markdown-components/Table'
 import remarkBreaks from 'remark-breaks'
 import rehypeRaw from 'rehype-raw'
+import { ChatMessage, ChatRole } from '../../../hooks/useCurrentChat'
 
 interface ChatListProps {
   messages: ChatMessage[]

src/hooks/useChatCompletion.tsx

@@ -1,9 +1,8 @@
 import { AvailableModels, Mode } from "../config/settings"
 import { ChatOpenAI } from "langchain/chat_models/openai"
-import { useStorage } from "./useStorage"
-import { useCurrentChat, Role } from "./useCurrentChat"
+import { useCurrentChat, ChatRole } from "./useCurrentChat"
 import { useMemo } from "react"
-import { AIMessage, HumanMessage, SystemMessage } from "langchain/dist/schema"
+import { AIMessage, HumanMessage, SystemMessage } from "langchain/schema"
 import { useState } from "react"
 
 interface UseChatCompletionProps {
@@ -22,26 +21,26 @@ export const useChatCompletion = ({
   systemPrompt,
   chatId,
 }: UseChatCompletionProps) => {
-  const { messages, updateAssistantMessage, updateStoredMessages, clearMessages } = useCurrentChat(chatId)
+  const { messages, updateAssistantMessage, addNewMessage, updateStoredMessages, clearMessages } = useCurrentChat(chatId)
   const [generating, setGenerating] = useState(false)
 
   const controller = new AbortController();
 
   const chat = useMemo(() => new ChatOpenAI({
     streaming: true,
+    openAIApiKey: apiKey,
   }), [])
 
-
-
   const submitQuery = async (query: string) => {
+    addNewMessage(ChatRole.USER, query)
     const previousMessages = messages.map((msg) => {
       switch (msg.role) {
-        case Role.ASSISTANT:
-          return new AIMessage(msg.message)
-        case Role.SYSTEM:
-          return new SystemMessage(msg.message)
-        case Role.USER:
-          return new HumanMessage(msg.message)
+        case ChatRole.ASSISTANT:
+          return new AIMessage(msg.content)
+        case ChatRole.SYSTEM:
+          return new SystemMessage(msg.content)
+        case ChatRole.USER:
+          return new HumanMessage(msg.content)
       }
     })
     setGenerating(true)

src/hooks/useCurrentChat.tsx

@@ -1,36 +1,42 @@
-import { useEffect } from "react"
 import { useState } from "react"
 import { useStorage } from "./useStorage"
 
 
-export enum Role {
+export enum ChatRole {
   "USER",
   "ASSISTANT",
   "SYSTEM"
 }
 
-export type Message = {
-  role: Role
-  message: string
+export type ChatMessage = {
+  role: ChatRole
+  content: string
   timestamp: number
 }
 
 export const useCurrentChat = (chatId: string) => {
-  const [storedMessages, setStoredMessages] = useStorage<Message[]>(`CHAT-${chatId}`, [])
-  const [messages, setMessages] = useState<Message[]>(storedMessages) // we don't directly update storedMessages for performance reasons
+  const [storedMessages, setStoredMessages] = useStorage<ChatMessage[]>(`CHAT-${chatId}`, [])
+  const [messages, setMessages] = useState<ChatMessage[]>(storedMessages) // we don't directly update storedMessages for performance reasons
 
   const updateAssistantMessage = (chunk: string) => {
     setMessages(messages => {
+      if (messages[messages.length - 1].role === ChatRole.USER) {
+        return [...messages, {
+          role: ChatRole.ASSISTANT,
+          content: chunk,
+          timestamp: Date.now(),
+        }]
+      }
       const lastMessage = messages[messages.length - 1]
-      lastMessage.message += chunk
+      lastMessage.content += chunk
       return [...messages]
     })
   }
 
-  const addNewMessage = (role: Role, message: string) => {
-    const newMessage: Message = {
+  const addNewMessage = (role: ChatRole, message: string) => {
+    const newMessage: ChatMessage = {
       role,
-      message,
+      content: message,
       timestamp: Date.now(),
     }
     setMessages([...messages, newMessage])