fix: don't display other conversation errors in debug settings

webapp/components/views/Threads/Settings.tsx

@@ -22,6 +22,7 @@ import { findProvider, getLocalProvider } from '@/utils/data/providers';
 import { Conversation, Preset } from '@/types';
 import { getFilename } from '@/utils/misc';
 import EditPresets from '@/components/common/EditPresets';
+import { ConversationError } from '@/types/ui';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
 import { Textarea } from '../../ui/textarea';
 import { Button } from '../../ui/button';
@@ -31,7 +32,7 @@ export default function Settings({
   errors,
 }: {
   conversationId?: string;
-  errors: string[];
+  errors: ConversationError[];
 }) {
   const { t } = useTranslation();
   const { conversations, updateConversations, providers } = useContext(AppContext);
@@ -170,10 +171,10 @@ export default function Settings({
         </TabsContent>
         <TabsContent value="debug" className="px-4">
           {errors.map((error) => (
-            <div key={error.substring(0, 5)} className="p-2 text-xs text-red-500">
+            <div key={error.id} className="p-2 text-xs text-red-500">
               <p>
                 <AlertTriangle className="mr-2 inline-flex h-4 w-4 text-red-500" />
-                <span>{error}</span>
+                <span>{error.error}</span>
               </p>
             </div>
           ))}

webapp/components/views/Threads/Thread.tsx

@@ -67,7 +67,7 @@ function Thread({
   conversationId?: string;
   rightToolbar: React.ReactNode;
   onSelectMenu: (menu: MenuAction, data: string) => void;
-  onError: (error: string) => void;
+  onError: (conversationId: string, error: string) => void;
 }) {
   const router = useRouter();
   const {
@@ -248,7 +248,7 @@ function Thread({
     } catch (e: any) {
       logger.error('sendMessage', e, typeof e);
       const error = String(e);
-      onError(error);
+      onError(conversation.id, error);
       setErrorMessage({ ...errorMessage, [conversation.id]: error });
       returnedMessage.content = t(error);
       returnedMessage.status = MessageStatus.Error;

webapp/components/views/Threads/index.tsx

@@ -17,6 +17,7 @@
 import { useContext, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useSearchParams } from 'next/navigation';
+import { v4 as uuid } from 'uuid';
 import useBackend from '@/hooks/useBackendContext';
 import { Conversation, PageSettings } from '@/types';
 import { DefaultPageSettings } from '@/utils/constants';
@@ -26,7 +27,7 @@ import { getConversation } from '@/utils/data/conversations';
 import { ModalIds } from '@/modals';
 import { ModalsContext } from '@/context/modals';
 import { AppContext } from '@/context';
-import { MenuAction, Page, ViewName } from '@/types/ui';
+import { ConversationError, MenuAction, Page, ViewName } from '@/types/ui';
 import { getAssistantId } from '@/utils/services';
 import { deepEqual } from '@/utils/data';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../ui/resizable';
@@ -47,9 +48,9 @@ type ThreadsProps = {
 export default function Threads({ selectedThreadId, view = ViewName.Recent }: ThreadsProps) {
   const router = useRouter();
   const { id } = router.query;
-  const [errors, setError] = useState<string[]>([]);
-  const handleError = (error: string) => {
-    setError([...errors, error]);
+  const [errors, setError] = useState<ConversationError[]>([]);
+  const handleError = (conversationId: string, error: string) => {
+    setError([...errors, { id: uuid(), conversationId, error }]);
   };
 
   const {
@@ -254,7 +255,10 @@ export default function Threads({ selectedThreadId, view = ViewName.Recent }: Th
         onResize={handleResizeSettings}
         className={!pageSettings.settingsHidden && view === ViewName.Recent ? '' : 'hidden'}
       >
-        <Settings conversationId={selectedThreadId} errors={errors} />
+        <Settings
+          conversationId={selectedThreadId}
+          errors={errors.filter((e) => e.conversationId === selectedThreadId)}
+        />
       </ResizablePanel>
     </ResizablePanelGroup>
   );

webapp/types/ui.ts

@@ -81,3 +81,9 @@ export enum ModalIds {
   NewPreset = 'newpreset',
   EditTarget = 'edittarget',
 }
+
+export type ConversationError = {
+  id: string;
+  conversationId: string;
+  error: string;
+};