Merge pull request #48 from Royal-lobster/better-errors-and-loading

Better errors and loading

.changeset/spotty-doors-yell.md

@@ -0,0 +1,5 @@
+---
+"syncia": minor
+---
+
+Better loading and error handling

package.json

@@ -64,7 +64,7 @@
     "postcss": "^8.4.21",
     "publish-browser-extension": "^1.4.1",
     "rome": "12.0.0",
-    "tailwindcss": "^3.2.6",
+    "tailwindcss": "^3.3.5",
     "typescript": "^4.9.5",
     "vite": "^4.1.1",
     "vite-plugin-zip-pack": "^1.0.5"

src/components/Sidebar/chat/ChatList.tsx

@@ -1,20 +1,27 @@
-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 { Table } from './markdown-components/Table'
-import remarkBreaks from 'remark-breaks'
+import { RiCloseLine, RiErrorWarningLine, RiLoader4Line } from 'react-icons/ri'
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
 import rehypeRaw from 'rehype-raw'
+import remarkBreaks from 'remark-breaks'
+import remarkGfm from 'remark-gfm'
 import { ChatMessage, ChatRole } from '../../../hooks/useCurrentChat'
 import FilePreviewBar from './FilePreviewBar'
-import { RiCloseLine } from 'react-icons/ri'
+import CodeBlock from './markdown-components/CodeBlock'
+import { Table } from './markdown-components/Table'
 
 interface ChatListProps {
   messages: ChatMessage[]
   removeMessagePair: (timestamp: number) => void
+  generating: boolean
+  error: Error | null
 }
 
-const ChatList = ({ messages, removeMessagePair }: ChatListProps) => {
+const ChatList = ({
+  messages,
+  removeMessagePair,
+  generating,
+  error,
+}: ChatListProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -78,6 +85,25 @@ const ChatList = ({ messages, removeMessagePair }: ChatListProps) => {
             </div>
           ))
       )}
+      {messages[messages.length - 1]?.role === ChatRole.USER && (
+        <div className="cdx-text-neutral-500">
+          {generating && !error && (
+            <div className="cdx-animate-pulse cdx-mt-4 cdx-flex cdx-justify-center cdx-items-center cdx-gap-2">
+              <RiLoader4Line className="cdx-animate-spin" />
+              <span>Generating</span>
+            </div>
+          )}
+          {error && (
+            <div className="cdx-p-4 cdx-flex cdx-items-center cdx-gap-4 cdx-bg-red-500/10">
+              <RiErrorWarningLine
+                className="cdx-text-red-500 cdx-flex-shrink-0"
+                size={20}
+              />
+              <span>{error.message}</span>
+            </div>
+          )}
+        </div>
+      )}
     </div>
   )
 }

src/components/Sidebar/chat/index.tsx

@@ -17,6 +17,7 @@ const Chat = ({ settings }: ChatProps) => {
     generating,
     cancelRequest,
     removeMessagePair,
+    error,
   } = useChatCompletion({
     model: settings.chat.modal,
     apiKey: settings.chat.openAIKey!,
@@ -43,7 +44,12 @@ const Chat = ({ settings }: ChatProps) => {
 
   return (
     <>
-      <ChatList messages={messages} removeMessagePair={removeMessagePair} />
+      <ChatList
+        messages={messages}
+        removeMessagePair={removeMessagePair}
+        generating={generating}
+        error={error}
+      />
       <SidebarInput
         loading={generating}
         submitMessage={submitQuery}

src/hooks/useChatCompletion.ts

@@ -40,6 +40,7 @@ export const useChatCompletion = ({
     removeMessagePair,
   } = useCurrentChat()
   const [generating, setGenerating] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
 
   const llm = useMemo(
     () =>
@@ -73,50 +74,56 @@ export const useChatCompletion = ({
       callbacks: [{ handleLLMNewToken: updateAssistantMessage }],
     }
 
+    setError(null)
     setGenerating(true)
 
-    /**
-     * If context is provided, we need to use the LLM to get the relevant documents
-     * and then run the LLM on those documents. We use in memory vector store to
-     * get the relevant documents
-     */
-    let matchedContext
-    if (context) {
-      matchedContext = await getMatchedContent(message.text, context, apiKey)
-    }
+    try {
+      /**
+       * If context is provided, we need to use the LLM to get the relevant documents
+       * and then run the LLM on those documents. We use in memory vector store to
+       * get the relevant documents
+       */
+      let matchedContext
+      if (context) {
+        matchedContext = await getMatchedContent(message.text, context, apiKey)
+      }
 
-    const expandedQuery = matchedContext
-      ? endent`
+      const expandedQuery = matchedContext
+        ? endent`
       ### Context
       ${matchedContext}
       ### Question:
       ${message.text}
     `
-      : message.text
+        : message.text
 
-    const messages = [
-      new SystemMessage(systemPrompt),
-      ...previousMessages,
-      new HumanMessage({
-        content: [
-          { type: 'text', text: expandedQuery },
-          ...(message.files.length > 0
-            ? await Promise.all(
-                message.files.map(async (file) => {
-                  return {
-                    type: 'image_url',
-                    image_url: await convertBlobToBase64(file.blob),
-                  } as const
-                }),
-              )
-            : []),
-        ],
-      }),
-    ]
+      const messages = [
+        new SystemMessage(systemPrompt),
+        ...previousMessages,
+        new HumanMessage({
+          content: [
+            { type: 'text', text: expandedQuery },
+            ...(message.files.length > 0
+              ? await Promise.all(
+                  message.files.map(async (file) => {
+                    return {
+                      type: 'image_url',
+                      image_url: await convertBlobToBase64(file.blob),
+                    } as const
+                  }),
+                )
+              : []),
+          ],
+        }),
+      ]
 
-    await llm.call(messages, options)
-    commitToStoredMessages()
-    setGenerating(false)
+      await llm.call(messages, options)
+    } catch (e) {
+      setError(e as Error)
+    } finally {
+      commitToStoredMessages()
+      setGenerating(false)
+    }
   }
 
   const cancelRequest = () => {
@@ -132,5 +139,6 @@ export const useChatCompletion = ({
     cancelRequest,
     clearMessages,
     removeMessagePair,
+    error,
   }
 }

src/hooks/useCurrentChat.ts

@@ -138,7 +138,11 @@ export const useCurrentChat = () => {
     setMessages((p) => {
       const index = p.findIndex((msg) => msg.timestamp === timestamp)
       if (index === -1 || p[index].role !== ChatRole.USER) return p
-      p.splice(index, 2) // remove the user message and the assistant message
+      p.splice(index, 1) // remove user message
+      if (p[index] && p[index].role === ChatRole.ASSISTANT) {
+        // remove assistant message
+        p.splice(index, 1)
+      }
       return [...p]
     })
     commitToStoredMessages()

src/pages/sidebar/index.css

@@ -3,6 +3,31 @@
 @tailwind utilities;
 
 
+.cdx-animate-spin{
+	animation: cdx-spin 1s linear infinite;
+}
+@keyframes cdx-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.cdx-animate-pulse {
+  animation: cdx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes cdx-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
 .syncia_table-container {
   width: 100%;
   height: 100%;