feat: add a loading status for messages

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

@@ -9,6 +9,7 @@ import CodeBlock from './CodeBlock'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { getModelLogo } from '@renderer/services/provider'
 import Logo from '@renderer/assets/images/logo.png'
+import { SyncOutlined } from '@ant-design/icons'
 
 interface Props {
   message: Message
@@ -49,9 +50,16 @@ const MessageItem: FC<Props> = ({ message, showMenu, onDeleteMessage }) => {
         )}
       </AvatarWrapper>
       <MessageContent>
-        <Markdown className="markdown" components={{ code: CodeBlock as any }}>
+        {message.status === 'sending' && (
-          {message.content}
+          <MessageContentLoading>
-        </Markdown>
+            <SyncOutlined spin size={24} />
+          </MessageContentLoading>
+        )}
+        {message.status !== 'sending' && (
+          <Markdown className="markdown" components={{ code: CodeBlock as any }}>
+            {message.content}
+          </Markdown>
+        )}
         {showMenu && (
           <MenusBar className="menubar">
             {message.role === 'user' && (
@@ -98,6 +106,13 @@ const MessageContent = styled.div`
   }
 `
 
+const MessageContentLoading = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 32px;
+`
+
 const MenusBar = styled.div`
   display: flex;
   flex-direction: row;

src/renderer/src/services/api.ts

@@ -37,9 +37,11 @@ export async function fetchChatCompletion({ messages, topic, assistant, onRespon
     topicId: topic.id,
     modelId: model.id,
     createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-    status: 'pending'
+    status: 'sending'
   }
 
+  onResponse({ ..._message })
+
   try {
     const stream = await openaiProvider.chat.completions.create({
       model: model.id,
@@ -54,7 +56,7 @@ export async function fetchChatCompletion({ messages, topic, assistant, onRespon
 
     for await (const chunk of stream) {
       content = content + (chunk.choices[0]?.delta?.content || '')
-      onResponse({ ..._message, content })
+      onResponse({ ..._message, content, status: 'pending' })
     }
 
     _message.content = content

src/renderer/src/types/index.ts

@@ -15,7 +15,7 @@ export type Message = {
   topicId: string
   modelId?: string
   createdAt: string
-  status: 'pending' | 'success' | 'error'
+  status: 'sending' | 'pending' | 'success' | 'error'
 }
 
 export type Topic = {
@@ -37,7 +37,7 @@ export type Provider = {
   apiKey: string
   apiHost: string
   models: Model[]
-  enabled: boolean
+  enabled?: boolean
   isSystem?: boolean
 }