@lobehub/chat 0.147.21 → 0.148.0

package/src/services/__tests__/chat.test.ts

@@ -1,16 +1,40 @@
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { act } from '@testing-library/react';
+import { merge } from 'lodash';
 import { describe, expect, it, vi } from 'vitest';
 
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
+import {
+  LobeAnthropicAI,
+  LobeAzureOpenAI,
+  LobeBedrockAI,
+  LobeGoogleAI,
+  LobeGroq,
+  LobeMistralAI,
+  LobeMoonshotAI,
+  LobeOllamaAI,
+  LobeOpenAI,
+  LobeOpenRouterAI,
+  LobePerplexityAI,
+  LobeTogetherAI,
+  LobeZeroOneAI,
+  LobeZhipuAI,
+  ModelProvider,
+} from '@/libs/agent-runtime';
+import { AgentRuntime } from '@/libs/agent-runtime';
 import { useFileStore } from '@/store/file';
+import { GlobalStore } from '@/store/global';
+import {
+  GlobalSettingsState,
+  initialSettingsState,
+} from '@/store/global/slices/settings/initialState';
 import { useToolStore } from '@/store/tool';
 import { DalleManifest } from '@/tools/dalle';
 import { ChatMessage } from '@/types/message';
 import { ChatStreamPayload } from '@/types/openai/chat';
 import { LobeTool } from '@/types/tool';
 
-import { chatService } from '../chat';
+import { chatService, initializeWithClientStore } from '../chat';
 
 // Mocking external dependencies
 vi.mock('i18next', () => ({
@@ -649,3 +673,265 @@ Get data from users`,
     });
   });
 });
+
+/**
+ * Tests for AgentRuntime on client side, aim to test the
+ * initialization of AgentRuntime with different providers
+ */
+vi.mock('../_auth', async (importOriginal) => {
+  return await importOriginal();
+});
+describe('AgentRuntimeOnClient', () => {
+  describe('initializeWithClientStore', () => {
+    describe('should initialize with options correctly', () => {
+      it('OpenAI provider: with apikey and endpoint', async () => {
+        // Mock the global store to return the user's OpenAI API key and endpoint
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              openai: {
+                apiKey: 'user-openai-key',
+                endpoint: 'user-openai-endpoint',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.OpenAI, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeOpenAI);
+        expect(runtime['_runtime'].baseURL).toBe('user-openai-endpoint');
+      });
+
+      it('Azure provider: with apiKey, apiVersion, endpoint', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              azure: {
+                apiKey: 'user-azure-key',
+                endpoint: 'user-azure-endpoint',
+                apiVersion: '2024-02-01',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Azure, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeAzureOpenAI);
+      });
+
+      it('Google provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              google: {
+                apiKey: 'user-google-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Google, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeGoogleAI);
+      });
+
+      it('Moonshot AI provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              moonshot: {
+                apiKey: 'user-moonshot-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Moonshot, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeMoonshotAI);
+      });
+
+      it('Bedrock provider: with accessKeyId, region, secretAccessKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              bedrock: {
+                accessKeyId: 'user-bedrock-access-key',
+                region: 'user-bedrock-region',
+                secretAccessKey: 'user-bedrock-secret',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Bedrock, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeBedrockAI);
+      });
+
+      it('Ollama provider: with endpoint', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              ollama: {
+                endpoint: 'user-ollama-endpoint',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Ollama, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeOllamaAI);
+      });
+
+      it('Perplexity provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              perplexity: {
+                apiKey: 'user-perplexity-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Perplexity, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobePerplexityAI);
+      });
+
+      it('Anthropic provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              anthropic: {
+                apiKey: 'user-anthropic-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Anthropic, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeAnthropicAI);
+      });
+
+      it('Mistral provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              mistral: {
+                apiKey: 'user-mistral-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Mistral, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeMistralAI);
+      });
+
+      it('OpenRouter provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              openrouter: {
+                apiKey: 'user-openrouter-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.OpenRouter, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeOpenRouterAI);
+      });
+
+      it('TogetherAI provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              togetherai: {
+                apiKey: 'user-togetherai-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.TogetherAI, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeTogetherAI);
+      });
+
+      it('ZeroOneAI provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              zeroone: {
+                apiKey: 'user-zeroone-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.ZeroOne, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeZeroOneAI);
+      });
+
+      it('Groq provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              groq: {
+                apiKey: 'user-groq-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.Groq, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeGroq);
+      });
+
+      /**
+       * Should not have a unknown provider in client, but has
+       * similar cases in server side
+       */
+      it('Unknown provider: with apiKey', async () => {
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              unknown: {
+                apiKey: 'user-unknown-key',
+                endpoint: 'user-unknown-endpoint',
+              },
+            },
+          },
+        } as any as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore('unknown' as ModelProvider, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeOpenAI);
+      });
+
+      /**
+       * The following test cases need to be enforce
+       */
+
+      it('ZhiPu AI provider: with apiKey', async () => {
+        // Mock the generateApiToken function
+        vi.mock('@/libs/agent-runtime/zhipu/authToken', () => ({
+          generateApiToken: vi
+            .fn()
+            .mockResolvedValue(
+              'eyJhbGciOiJIUzI1NiIsInNpZ25fdHlwZSI6IlNJR04iLCJ0eXAiOiJKV1QifQ.eyJhcGlfa2V5IjoiemhpcHUiLCJleHAiOjE3MTU5MTc2NzMsImlhdCI6MTcxMzMyNTY3M30.gt8o-hUDvJFPJLYcH4EhrT1LAmTXI8YnybHeQjpD9oM',
+            ),
+        }));
+        merge(initialSettingsState, {
+          settings: {
+            languageModel: {
+              zhipu: {
+                apiKey: 'zhipu.user-key',
+              },
+            },
+          },
+        } as GlobalSettingsState) as unknown as GlobalStore;
+        const runtime = await initializeWithClientStore(ModelProvider.ZhiPu, {});
+        expect(runtime).toBeInstanceOf(AgentRuntime);
+        expect(runtime['_runtime']).toBeInstanceOf(LobeZhipuAI);
+      });
+    });
+  });
+});

package/src/services/chat.ts

@@ -2,13 +2,15 @@ import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/
 import { produce } from 'immer';
 import { merge } from 'lodash-es';
 
+import { createErrorResponse } from '@/app/api/errorResponse';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { TracePayload, TraceTagMap } from '@/const/trace';
-import { ModelProvider } from '@/libs/agent-runtime';
+import { AgentRuntime, ChatCompletionErrorPayload, ModelProvider } from '@/libs/agent-runtime';
 import { filesSelectors, useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import {
   commonSelectors,
+  modelConfigSelectors,
   modelProviderSelectors,
   preferenceSelectors,
 } from '@/store/global/selectors';
@@ -16,13 +18,14 @@ import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
+import { ChatErrorType } from '@/types/fetch';
 import { ChatMessage } from '@/types/message';
 import type { ChatStreamPayload, OpenAIChatMessage } from '@/types/openai/chat';
 import { UserMessageContentPart } from '@/types/openai/chat';
 import { FetchSSEOptions, OnFinishHandler, fetchSSE, getMessageError } from '@/utils/fetch';
 import { createTraceHeader, getTraceId } from '@/utils/trace';
 
-import { createHeaderWithAuth } from './_auth';
+import { createHeaderWithAuth, getProviderAuthPayload } from './_auth';
 import { API_ENDPOINTS } from './_url';
 
 interface FetchOptions {
@@ -64,6 +67,119 @@ interface CreateAssistantMessageStream extends FetchSSEOptions {
   trace?: TracePayload;
 }
 
+/**
+ * Initializes the AgentRuntime with the client store.
+ * @param provider - The provider name.
+ * @param payload - Init options
+ * @returns The initialized AgentRuntime instance
+ *
+ * **Note**: if you try to fetch directly, use `fetchOnClient` instead.
+ */
+export function initializeWithClientStore(provider: string, payload: any) {
+  // add auth payload
+  const providerAuthPayload = getProviderAuthPayload(provider);
+  const commonOptions = {
+    // Some provider base openai sdk, so enable it run on browser
+    dangerouslyAllowBrowser: true,
+  };
+  let providerOptions = {};
+
+  switch (provider) {
+    default:
+    case ModelProvider.OpenAI: {
+      providerOptions = {
+        baseURL: providerAuthPayload?.endpoint,
+      };
+      break;
+    }
+    case ModelProvider.Azure: {
+      providerOptions = {
+        apiVersion: providerAuthPayload?.azureApiVersion,
+        // That's a wired properity, but just remapped it
+        apikey: providerAuthPayload?.apiKey,
+      };
+      break;
+    }
+    case ModelProvider.ZhiPu: {
+      break;
+    }
+    case ModelProvider.Google: {
+      providerOptions = {
+        baseURL: providerAuthPayload?.endpoint,
+      };
+      break;
+    }
+    case ModelProvider.Moonshot: {
+      break;
+    }
+    case ModelProvider.Bedrock: {
+      if (providerAuthPayload?.apiKey) {
+        providerOptions = {
+          accessKeyId: providerAuthPayload?.awsAccessKeyId,
+          accessKeySecret: providerAuthPayload?.awsSecretAccessKey,
+          region: providerAuthPayload?.awsRegion,
+        };
+      }
+      break;
+    }
+    case ModelProvider.Ollama: {
+      providerOptions = {
+        baseURL: providerAuthPayload?.endpoint,
+      };
+      break;
+    }
+    case ModelProvider.Perplexity: {
+      break;
+    }
+    case ModelProvider.Anthropic: {
+      providerOptions = {
+        baseURL: providerAuthPayload?.endpoint,
+      };
+      break;
+    }
+    case ModelProvider.Mistral: {
+      break;
+    }
+    case ModelProvider.Groq: {
+      break;
+    }
+    case ModelProvider.OpenRouter: {
+      break;
+    }
+    case ModelProvider.TogetherAI: {
+      break;
+    }
+    case ModelProvider.ZeroOne: {
+      break;
+    }
+  }
+
+  /**
+   * Configuration override order:
+   * payload -> providerOptions -> providerAuthPayload -> commonOptions
+   */
+  return AgentRuntime.initializeWithProviderOptions(provider, {
+    [provider]: {
+      ...commonOptions,
+      ...providerAuthPayload,
+      ...providerOptions,
+      ...payload,
+    },
+  });
+}
+
+/**
+ * Fetch chat completion on the client side.
+ * @param provider - The provider name.
+ * @param payload - The payload data for the chat stream.
+ * @returns A promise that resolves to the chat response.
+ */
+export async function fetchOnClient(provider: string, payload: Partial<ChatStreamPayload>) {
+  const agentRuntime = await initializeWithClientStore(provider, payload);
+  const data = payload as ChatStreamPayload;
+  return await agentRuntime.chat(data);
+}
+
 class ChatService {
   createAssistantMessage = async (
     { plugins: enabledPlugins, messages, ...params }: GetChatCompletionPayload,
@@ -149,6 +265,36 @@ class ChatService {
       { ...res, model },
     );
 
+    /**
+     * Use browser agent runtime
+     */
+    const enableFetchOnClient = modelConfigSelectors.isProviderFetchOnClient(provider)(
+      useGlobalStore.getState(),
+    );
+    /**
+     * Notes:
+     * 1. Broswer agent runtime will skip auth check if a key and endpoint provided by
+     *    user which will cause abuse of plugins services
+     * 2. This feature will disabled by default
+     */
+    if (enableFetchOnClient) {
+      try {
+        return await fetchOnClient(provider, payload);
+      } catch (e) {
+        const {
+          errorType = ChatErrorType.BadRequest,
+          error: errorContent,
+          ...res
+        } = e as ChatCompletionErrorPayload;
+
+        const error = errorContent || e;
+        // track the error at server side
+        console.error(`Route: [${provider}] ${errorType}:`, error);
+
+        return createErrorResponse(errorType, { error, ...res, provider });
+      }
+    }
+
     const traceHeader = createTraceHeader({ ...options?.trace });
 
     const headers = await createHeaderWithAuth({

package/src/store/chat/slices/message/action.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 // Disable the auto sort key eslint rule to make the code more logic and readable
 import { copyToClipboard } from '@lobehub/ui';
+import { produce } from 'immer';
 import { template } from 'lodash-es';
 import { SWRResponse, mutate } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
@@ -19,6 +20,7 @@ import { agentSelectors } from '@/store/session/selectors';
 import { ChatMessage } from '@/types/message';
 import { TraceEventPayloads } from '@/types/trace';
 import { setNamespace } from '@/utils/storeDebug';
+import { nanoid } from '@/utils/uuid';
 
 import { chatSelectors } from '../../selectors';
 import { MessageDispatch, messagesReducer } from './reducer';
@@ -97,6 +99,7 @@ export interface ChatMessageAction {
     id?: string,
     action?: string,
   ) => AbortController | undefined;
+  toggleMessageLoading: (loading: boolean, id: string) => void;
   refreshMessages: () => Promise<void>;
   // TODO: 后续 smoothMessage 实现考虑落到 sse 这一层
   createSmoothMessage: (id: string) => {
@@ -111,6 +114,7 @@ export interface ChatMessageAction {
    * @param content
    */
   internalUpdateMessageContent: (id: string, content: string) => Promise<void>;
+  internalCreateMessage: (params: CreateMessageParams) => Promise<string>;
   internalResendMessage: (id: string, traceId?: string) => Promise<void>;
   internalTraceMessage: (id: string, payload: TraceEventPayloads) => Promise<void>;
 }
@@ -130,6 +134,7 @@ export const chatMessage: StateCreator<
   ChatMessageAction
 > = (set, get) => ({
   deleteMessage: async (id) => {
+    get().dispatchMessage({ type: 'deleteMessage', id });
     await messageService.removeMessage(id);
     await get().refreshMessages();
   },
@@ -167,43 +172,6 @@ export const chatMessage: StateCreator<
     await messageService.removeAllMessages();
     await refreshMessages();
   },
-  internalResendMessage: async (messageId, traceId) => {
-    // 1. 构造所有相关的历史记录
-    const chats = chatSelectors.currentChats(get());
-
-    const currentIndex = chats.findIndex((c) => c.id === messageId);
-    if (currentIndex < 0) return;
-
-    const currentMessage = chats[currentIndex];
-
-    let contextMessages: ChatMessage[] = [];
-
-    switch (currentMessage.role) {
-      case 'function':
-      case 'user': {
-        contextMessages = chats.slice(0, currentIndex + 1);
-        break;
-      }
-      case 'assistant': {
-        // 消息是 AI 发出的因此需要找到它的 user 消息
-        const userId = currentMessage.parentId;
-        const userIndex = chats.findIndex((c) => c.id === userId);
-        // 如果消息没有 parentId，那么同 user/function 模式
-        contextMessages = chats.slice(0, userIndex < 0 ? currentIndex + 1 : userIndex + 1);
-        break;
-      }
-    }
-
-    if (contextMessages.length <= 0) return;
-
-    const { coreProcessMessage } = get();
-
-    const latestMsg = contextMessages.filter((s) => s.role === 'user').at(-1);
-
-    if (!latestMsg) return;
-
-    await coreProcessMessage(contextMessages, latestMsg.id, traceId);
-  },
   sendMessage: async ({ message, files, onlyAddUserMessage }) => {
     const { coreProcessMessage, activeTopicId, activeId } = get();
     if (!activeId) return;
@@ -223,8 +191,7 @@ export const chatMessage: StateCreator<
       topicId: activeTopicId,
     };
 
-    const id = await messageService.createMessage(newMessage);
-    await get().refreshMessages();
+    const id = await get().internalCreateMessage(newMessage);
 
     // if only add user message, then stop
     if (onlyAddUserMessage) return;
@@ -315,8 +282,7 @@ export const chatMessage: StateCreator<
       topicId: activeTopicId, // if there is activeTopicId，then add it to topicId
     };
 
-    const mid = await messageService.createMessage(assistantMessage);
-    await refreshMessages();
+    const mid = await get().internalCreateMessage(assistantMessage);
 
     // 2. fetch the AI response
     const { isFunctionCall, content, functionCallAtEnd, functionCallContent, traceId } =
@@ -344,7 +310,7 @@ export const chatMessage: StateCreator<
           traceId,
         };
 
-        functionId = await messageService.createMessage(functionMessage);
+        functionId = await get().internalCreateMessage(functionMessage);
       }
 
       await refreshMessages();
@@ -533,6 +499,62 @@ export const chatMessage: StateCreator<
       window.removeEventListener('beforeunload', preventLeavingFn);
     }
   },
+  toggleMessageLoading: (loading, id) => {
+    set(
+      {
+        messageLoadingIds: produce(get().messageLoadingIds, (draft) => {
+          if (loading) {
+            draft.push(id);
+          } else {
+            const index = draft.indexOf(id);
+
+            if (index >= 0) draft.splice(index, 1);
+          }
+        }),
+      },
+      false,
+      'toggleMessageLoading',
+    );
+  },
+
+  internalResendMessage: async (messageId, traceId) => {
+    // 1. 构造所有相关的历史记录
+    const chats = chatSelectors.currentChats(get());
+
+    const currentIndex = chats.findIndex((c) => c.id === messageId);
+    if (currentIndex < 0) return;
+
+    const currentMessage = chats[currentIndex];
+
+    let contextMessages: ChatMessage[] = [];
+
+    switch (currentMessage.role) {
+      case 'function':
+      case 'user': {
+        contextMessages = chats.slice(0, currentIndex + 1);
+        break;
+      }
+      case 'assistant': {
+        // 消息是 AI 发出的因此需要找到它的 user 消息
+        const userId = currentMessage.parentId;
+        const userIndex = chats.findIndex((c) => c.id === userId);
+        // 如果消息没有 parentId，那么同 user/function 模式
+        contextMessages = chats.slice(0, userIndex < 0 ? currentIndex + 1 : userIndex + 1);
+        break;
+      }
+    }
+
+    if (contextMessages.length <= 0) return;
+
+    const { coreProcessMessage } = get();
+
+    const latestMsg = contextMessages.filter((s) => s.role === 'user').at(-1);
+
+    if (!latestMsg) return;
+
+    await coreProcessMessage(contextMessages, latestMsg.id, traceId);
+  },
+
   internalUpdateMessageContent: async (id, content) => {
     const { dispatchMessage, refreshMessages } = get();
 
@@ -545,6 +567,22 @@ export const chatMessage: StateCreator<
     await refreshMessages();
   },
 
+  internalCreateMessage: async (message) => {
+    const { dispatchMessage, refreshMessages, toggleMessageLoading } = get();
+
+    // use optimistic update to avoid the slow waiting
+    const tempId = 'tmp_' + nanoid();
+    dispatchMessage({ type: 'createMessage', id: tempId, value: message });
+
+    toggleMessageLoading(true, tempId);
+    const id = await messageService.createMessage(message);
+
+    await refreshMessages();
+    toggleMessageLoading(false, tempId);
+
+    return id;
+  },
+
   createSmoothMessage: (id) => {
     const { dispatchMessage } = get();
 

package/src/store/chat/slices/message/initialState.ts

@@ -9,7 +9,7 @@ export interface ChatMessageState {
   activeId: string;
   chatLoadingId?: string;
   inputMessage: string;
-  messageLoadingIds: [];
+  messageLoadingIds: string[];
   messages: ChatMessage[];
   /**
    * whether messages have fetched