feat: Standardize inline error messages (#4530)

janhq · Jan 28, 2025 · 261b44d · 261b44d
1 parent c46e30d
commit 261b44d
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 30 deletions.
diff --git a/web/containers/ErrorMessage/index.test.tsx b/web/containers/ErrorMessage/index.test.tsx
@@ -69,7 +69,7 @@ describe('ErrorMessage Component', () => {
 
     render(<ErrorMessage message={message} />)
 
-    expect(screen.getByText('troubleshooting assistance')).toBeInTheDocument()
+    expect(screen.getByText('Troubleshooting')).toBeInTheDocument()
   })
 
   it('opens troubleshooting modal when link is clicked', () => {
@@ -84,7 +84,7 @@ describe('ErrorMessage Component', () => {
 
     render(<ErrorMessage message={message} />)
 
-    fireEvent.click(screen.getByText('troubleshooting assistance'))
+    fireEvent.click(screen.getByText('Troubleshooting'))
     expect(mockSetModalTroubleShooting).toHaveBeenCalledWith(true)
   })
 })
diff --git a/web/containers/ErrorMessage/index.tsx b/web/containers/ErrorMessage/index.tsx
@@ -1,3 +1,5 @@
+import { useRef, useState } from 'react'
+
 import {
   EngineManager,
   ErrorCode,
@@ -7,6 +9,8 @@ import {
 
 import { useAtomValue, useSetAtom } from 'jotai'
 
+import { CheckIcon, ClipboardIcon, SearchCodeIcon } from 'lucide-react'
+
 import AutoLink from '@/containers/AutoLink'
 import ModalTroubleShooting, {
   modalTroubleShootingAtom,
@@ -24,30 +28,25 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   const setMainState = useSetAtom(mainViewStateAtom)
   const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
   const activeAssistant = useAtomValue(activeAssistantAtom)
-
-  const defaultDesc = () => {
-    return (
-      <>
-        <p>
-          {`Something's wrong.`} Access&nbsp;
-          <span
-            className="cursor-pointer text-[hsla(var(--app-link))] underline"
-            onClick={() => setModalTroubleShooting(true)}
-          >
-            troubleshooting assistance
-          </span>
-          &nbsp;now.
-        </p>
-        <ModalTroubleShooting />
-      </>
-    )
-  }
+  const errorDivRef = useRef<HTMLDivElement>(null)
+  const [copied, setCopied] = useState(false)
 
   const getEngine = () => {
     const engineName = activeAssistant?.model?.engine
     return engineName ? EngineManager.instance().get(engineName) : null
   }
 
+  const handleCopy = () => {
+    if (errorDivRef.current) {
+      const errorText = errorDivRef.current.innerText
+      if (errorText) {
+        navigator.clipboard.writeText(errorText)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      }
+    }
+  }
+
   const getErrorTitle = () => {
     const engine = getEngine()
 
@@ -69,9 +68,9 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
               </button>{' '}
               and try again.
             </span>
-            {defaultDesc()}
           </>
         )
+
       default:
         return (
           <p
@@ -90,7 +89,6 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
                 {message?.content[0]?.text?.value && (
                   <AutoLink text={message?.content[0]?.text?.value} />
                 )}
-                {defaultDesc()}
               </>
             )}
           </p>
@@ -99,15 +97,54 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
   }
 
   return (
-    <div className="mx-auto my-6 max-w-[700px]">
-      {!!message.metadata?.error && (
-        <div
-          key={message.id}
-          className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]"
-        >
-          {getErrorTitle()}
+    <div className="mx-auto my-6 max-w-[700px] px-4">
+      <div
+        className="mx-auto  max-w-[400px] rounded-lg border border-[hsla(var(--app-border))]"
+        key={message.id}
+      >
+        <div className="flex justify-between border-b border-inherit px-4 py-2">
+          <h6 className="text-[hsla(var(--destructive-bg))]">Error</h6>
+          <div className="flex gap-x-4 text-xs">
+            <div>
+              <span
+                className="flex cursor-pointer items-center gap-x-1 text-[hsla(var(--app-link))]"
+                onClick={() => setModalTroubleShooting(true)}
+              >
+                <SearchCodeIcon size={14} className="text-inherit" />
+                Troubleshooting
+              </span>
+              <ModalTroubleShooting />
+            </div>
+            <div
+              className="flex cursor-pointer items-center gap-x-1 text-[hsla(var(--text-secondary))]"
+              onClick={handleCopy}
+            >
+              {copied ? (
+                <>
+                  <CheckIcon
+                    size={14}
+                    className="text-[hsla(var(--success-bg))]"
+                  />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <ClipboardIcon size={14} className="text-inherit" />
+                  Copy
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="max-h-[80px] w-full overflow-x-auto p-4 py-2">
+          <div
+            className="text-xs leading-relaxed text-[hsla(var(--text-secondary))]"
+            ref={errorDivRef}
+          >
+            {getErrorTitle()}
+          </div>
         </div>
-      )}
+      </div>
     </div>
   )
 }