feat: add error message

src/renderer/src/config/antd.ts

@@ -1,8 +1,10 @@
 import { theme, ThemeConfig } from 'antd'
 
+export const colorPrimary = '#00b96b'
+
 export const AntdThemeConfig: ThemeConfig = {
   token: {
-    colorPrimary: '#00b96b',
+    colorPrimary,
     borderRadius: 5
   },
   algorithm: [theme.darkAlgorithm]

src/renderer/src/pages/apps/AppsPage.tsx

@@ -8,6 +8,7 @@ import { CheckOutlined, PlusOutlined } from '@ant-design/icons'
 import { SystemAssistant } from '@renderer/types'
 import { getDefaultAssistant } from '@renderer/services/assistant'
 import { useAssistants } from '@renderer/hooks/useAssistant'
+import { colorPrimary } from '@renderer/config/antd'
 
 const { Title } = Typography
 
@@ -45,7 +46,7 @@ const AppsPage: FC = () => {
                   <Col span={6} key={group + index} style={{ marginBottom: 16 }}>
                     <AssistantCard>
                       <AssistantHeader>
-                        <Title level={5} style={{ marginBottom: 0, color: '#00b96b' }}>
+                        <Title level={5} style={{ marginBottom: 0, color: colorPrimary }}>
                           {assistant.name}
                         </Title>
                         {added && (

src/renderer/src/pages/home/components/Messages.tsx

@@ -94,11 +94,11 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
   useEffect(() => hljs.highlightAll(), [messages, lastMessage])
 
   useEffect(() => {
-    messagesRef.current?.scrollIntoView({ behavior: 'smooth' })
+    messagesRef.current?.scrollTo({ top: 100000, behavior: 'auto' })
   }, [messages])
 
   return (
-    <Container id="messages" ref={messagesRef}>
+    <Container id="messages" key={assistant.id} ref={messagesRef}>
       {lastMessage && <MessageItem message={lastMessage} />}
       {reverse([...messages]).map((message) => (
         <MessageItem message={message} key={message.id} showMenu onDeleteMessage={onDeleteMessage} />

src/renderer/src/pages/home/components/Navigation.tsx

@@ -1,4 +1,5 @@
 import { NavbarCenter } from '@renderer/components/app/Navbar'
+import { colorPrimary } from '@renderer/config/antd'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useProviders } from '@renderer/hooks/useProvider'
 import { Assistant } from '@renderer/types'
@@ -23,7 +24,7 @@ const Navigation: FC<Props> = ({ activeAssistant }) => {
       children: p.models.map((m) => ({
         key: m.id,
         label: m.name,
-        style: m.id === model?.id ? { color: '#00b96b' } : undefined,
+        style: m.id === model?.id ? { color: colorPrimary } : undefined,
         onClick: () => setModel(m)
       }))
     }))

src/renderer/src/services/api.ts

@@ -28,15 +28,6 @@ export async function fetchChatCompletion({ messages, topic, assistant, onRespon
   const defaultModel = getDefaultModel()
   const model = assistant.model || defaultModel
 
-  const stream = await openaiProvider.chat.completions.create({
-    model: model.id,
-    messages: [
-      { role: 'system', content: assistant.prompt },
-      ...takeRight(messages, 5).map((message) => ({ role: message.role, content: message.content }))
-    ],
-    stream: true
-  })
-
   const _message: Message = {
     id: uuid(),
     role: 'assistant',
@@ -47,6 +38,16 @@ export async function fetchChatCompletion({ messages, topic, assistant, onRespon
     createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss')
   }
 
+  try {
+    const stream = await openaiProvider.chat.completions.create({
+      model: model.id,
+      messages: [
+        { role: 'system', content: assistant.prompt },
+        ...takeRight(messages, 5).map((message) => ({ role: message.role, content: message.content }))
+      ],
+      stream: true
+    })
+
     let content = ''
 
     for await (const chunk of stream) {
@@ -55,6 +56,9 @@ export async function fetchChatCompletion({ messages, topic, assistant, onRespon
     }
 
     _message.content = content
+  } catch (error: any) {
+    _message.content = `Error: ${error.message}`
+  }
 
   EventEmitter.emit(EVENT_NAMES.AI_CHAT_COMPLETION, _message)