@lobehub/chat 0.118.4 → 0.118.6

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.118.6](https://github.com/lobehub/lobe-chat/compare/v0.118.5...v0.118.6)
+
+<sup>Released on **2024-01-03**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Migration the ChatList into Conversation.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Migration the ChatList into Conversation, closes [#916](https://github.com/lobehub/lobe-chat/issues/916) ([6ee3795](https://github.com/lobehub/lobe-chat/commit/6ee3795))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.118.5](https://github.com/lobehub/lobe-chat/compare/v0.118.4...v0.118.5)
+
+<sup>Released on **2024-01-02**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Mobile device return to the previous page error.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Mobile device return to the previous page error, closes [#886](https://github.com/lobehub/lobe-chat/issues/886) ([99cfc0f](https://github.com/lobehub/lobe-chat/commit/99cfc0f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.118.4](https://github.com/lobehub/lobe-chat/compare/v0.118.3...v0.118.4)
 
 <sup>Released on **2024-01-02**</sup>

package/README.md

@@ -208,14 +208,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 <!-- AGENT LIST -->
 
-| Recent Submits                                                                                                                                                                                   | Description                                                                                                                                                                                          |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Deployment Specialist Agent](https://chat-preview.lobehub.com/market?agent=deployment-agent)<br/><sup>By **[amitalokbera](https://github.com/amitalokbera)** on **2023-12-27**</sup>            | An AI Deployment Specialist is an expert in managing the full deployment lifecycle of software applications, particularly web applications.<br/>`code` `deployment` `software`                       |
-| [Overview of Art Thesis Experts](https://chat-preview.lobehub.com/market?agent=thesis-overview)<br/><sup>By **[caoyang2002](https://github.com/caoyang2002)** on **2023-12-27**</sup>            | Specializing in brief thesis and art criticism<br/>`art` `thesis` `critique`                                                                                                                         |
-| [American English Transcreation Expert](https://chat-preview.lobehub.com/market?agent=to-local-english)<br/><sup>By **[doresu](https://github.com/doresu)** on **2023-12-27**</sup>              | Rough old editor, seasoned writer, and translator, proficient in translating English directly and transforming it into authentic American English<br/>`translation` `editing` `writing` `translator` |
-| [Academic Proofreading Expert](https://chat-preview.lobehub.com/market?agent=academic-paragraph-refiner)<br/><sup>By **[Feliks151450](https://github.com/Feliks151450)** on **2023-12-26**</sup> | Highly skilled in advanced research proofreading and language editing, specializing in multiple research fields and proficient in academic English.<br/>`proofreading` `writing` `research`          |
-
-> 📊 Total agents: [<kbd>**82**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| Recent Submits                                                                                                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Amazon Title Assistant](https://chat-preview.lobehub.com/market?agent=amazon)<br/><sup>By **[cm2457618290](https://github.com/cm2457618290)** on **2024-01-02**</sup>        | Provide product keywords or product links to automatically write titles and product introductions<br/>`assistant`                                                                                                                                                                                                                                                                                                                                                          |
+| [Exam Assistant](https://chat-preview.lobehub.com/market?agent=generador-examenes)<br/><sup>By **[aitorroma](https://github.com/aitorroma)** on **2024-01-02**</sup>          | I am a skills summary assistant and cannot conduct interactive exams. However, I can help you summarize your skills and knowledge in a clear and concise format.<br/>`exam` `learning` `statistics`                                                                                                                                                                                                                                                                        |
+| [Teaching Mentor](https://chat-preview.lobehub.com/market?agent=ljrwwjl-development)<br/><sup>By **[ljr1314](https://github.com/ljr1314)** on **2024-01-02**</sup>            | A friendly and helpful mentor who customizes explanations and examples based on the user's learning level and interests to ensure clarity. Ask 4 questions, then provide explanations, examples, and analogies, and ensure understanding through questioning. Finally, have the user explain the topic in their own words and provide an example. End on a positive note and encourage further learning.<br/>`mentor` `education` `explanation` `communication` `learning` |
+| [MidjourneyGPT](https://chat-preview.lobehub.com/market?agent=prompt-composition)<br/><sup>By **[richards199999](https://github.com/richards199999)** on **2023-12-30**</sup> | Write perfect and beautiful prompts for Midjourney. (Including V6!)<br/>`midjourney` `prompt` `ai`                                                                                                                                                                                                                                                                                                                                                                         |
+
+> 📊 Total agents: [<kbd>**87**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -184,14 +184,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                                         | 助手说明                                                                                           |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| [部署专家代理](https://chat-preview.lobehub.com/market?agent=deployment-agent)<br/><sup>By **[amitalokbera](https://github.com/amitalokbera)** on **2023-12-27**</sup>           | AI 部署专家是管理软件应用的完整部署生命周期的专家，特别是 Web 应用。<br/>`代码` `部署` `容器化`    |
-| [美术论文概述专家](https://chat-preview.lobehub.com/market?agent=thesis-overview)<br/><sup>By **[caoyang2002](https://github.com/caoyang2002)** on **2023-12-27**</sup>          | 擅长论文简述与美术评论<br/>`美术` `论文` `评论`                                                    |
-| [美式英语转译专家](https://chat-preview.lobehub.com/market?agent=to-local-english)<br/><sup>By **[doresu](https://github.com/doresu)** on **2023-12-27**</sup>                   | 粗鲁老编辑、资深作家和翻译家，擅长直译英文并转化为地道的美式英语<br/>`翻译` `编辑` `写作` `翻译家` |
-| [学术润色专家](https://chat-preview.lobehub.com/market?agent=academic-paragraph-refiner)<br/><sup>By **[Feliks151450](https://github.com/Feliks151450)** on **2023-12-26**</sup> | 高级研究校对及语言编辑，专业于多个研究领域，精通学术英语。<br/>`校对` `写作` `研究`                |
-
-> 📊 Total agents: [<kbd>**82**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| 最近新增                                                                                                                                                                      | 助手说明                                                                                                                                                                                                                                                                   |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Amazon Title Assistant](https://chat-preview.lobehub.com/market?agent=amazon)<br/><sup>By **[cm2457618290](https://github.com/cm2457618290)** on **2024-01-02**</sup>        | Provide product keywords or product links to automatically write titles and product introductions<br/>`assistant`                                                                                                                                                          |
+| [考试助手](https://chat-preview.lobehub.com/market?agent=generador-examenes)<br/><sup>By **[aitorroma](https://github.com/aitorroma)** on **2024-01-02**</sup>                | 我是一个技能总结助手，无法进行互动式考试。但我可以帮助你以清晰简洁的格式总结你的技能和知识。<br/>`考试` `学习` `统计`                                                                                                                                                      |
+| [教学导师](https://chat-preview.lobehub.com/market?agent=ljrwwjl-development)<br/><sup>By **[ljr1314](https://github.com/ljr1314)** on **2024-01-02**</sup>                   | 友好乐于助人的导师，根据用户的学习水平和兴趣定制解释和示例，确保简洁明了。问 4 个问题，然后提供解释、例子和类比，并通过提问确保用户理解。最后让用户用自己的语言解释主题，并给出一个例子。以积极正面的方式结束，并鼓励用户深入学习。<br/>`导师` `教育` `解释` `交流` `学习` |
+| [MidjourneyGPT](https://chat-preview.lobehub.com/market?agent=prompt-composition)<br/><sup>By **[richards199999](https://github.com/richards199999)** on **2023-12-30**</sup> | 为 Midjourney 编写完美而美丽的提示。（包括 V6！）<br/>`midjourney` `prompt` `ai`                                                                                                                                                                                           |
+
+> 📊 Total agents: [<kbd>**87**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/docs/Development/Chat-API.zh-CN.md

@@ -17,46 +17,70 @@ LobeChat 的大模型 AI 实现主要依赖于 OpenAI 的 API，包括后端的
 
 ### 核心会话 API
 
-在 `src/app/api/openai/chat/handler.ts` 文件中，我们定义了 `POST` 方法，该方法首先从请求中解析出 payload 数据（即客户端发送的会话内容），然后从请求中获取 OpenAI 的授权信息。之后，我们创建一个 `openai` 对象，并调用 `createChatCompletion` 方法，该方法负责发送会话请求到 OpenAI 并返回结果。
+在 `src/app/api/openai/chat/route.ts` 中，定义了一个处理 POST 请求的方法，主要负责从请求体中提取 `OpenAIChatStreamPayload` 类型的 payload，并使用 `createBizOpenAI` 函数根据请求和模型信息创建 OpenAI 实例。随后，该方法调用 `createChatCompletion` 来处理实际的会话，并返回响应结果。如果创建 OpenAI 实例过程中出现错误，则直接返回错误响应。
 
 ```ts
 export const POST = async (req: Request) => {
-  const payload = await req.json();
+  const payload = (await req.json()) as OpenAIChatStreamPayload;
 
-  const { apiKey, endpoint } = getOpenAIAuthFromRequest(req);
+  const openaiOrErrResponse = createBizOpenAI(req, payload.model);
 
-  const openai = createOpenai(apiKey, endpoint);
+  // if resOrOpenAI is a Response, it means there is an error,just return it
+  if (openaiOrErrResponse instanceof Response) return openaiOrErrResponse;
 
-  return createChatCompletion({ openai, payload });
+  return createChatCompletion({ openai: openaiOrErrResponse, payload });
 };
 ```
 
 ### 会话结果处理
 
-在 `src/app/api/openai/chat/createChatCompletion.ts` 文件中，我们定义了 `createChatCompletion` 方法，该方法首先对 payload 数据进行预处理，然后调用 OpenAI 的 `chat.completions.create` 方法发送请求，并使用 [Vercel AI SDK](https://sdk.vercel.ai/docs) 中的 `OpenAIStream` 将返回的结果转化为流式响应。
+而在 `src/app/api/openai/chat/createChatCompletion.ts` 文件中，`createChatCompletion` 方法主要负责与 OpenAI API 进行交互，处理会话请求。它首先对 payload 中的消息进行预处理，然后通过 `openai.chat.completions.create` 方法发送 API 请求，并使用 `OpenAIStream` 将返回的响应转换为流式格式。如果在 API 调用过程中出现错误，方法将生成并处理相应的错误响应。
 
 ```ts
 import { OpenAIStream, StreamingTextResponse } from 'ai';
 
 export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => {
+  // 预处理消息
   const { messages, ...params } = payload;
-
-  const formatMessages = messages.map((m) => ({
-    content: m.content,
-    name: m.name,
-    role: m.role,
-  }));
-
-  const response = await openai.chat.completions.create(
-    {
-      messages: formatMessages,
-      ...params,
-      stream: true,
-    },
-    { headers: { Accept: '*/*' } },
-  );
-  const stream = OpenAIStream(response);
-  return new StreamingTextResponse(stream);
+  // 发送 API 请求
+  try {
+    const response = await openai.chat.completions.create(
+      {
+        messages,
+        ...params,
+        stream: true,
+      } as unknown as OpenAI.ChatCompletionCreateParamsStreaming,
+      { headers: { Accept: '*/*' } },
+    );
+    const stream = OpenAIStream(response);
+    return new StreamingTextResponse(stream);
+  } catch (error) {
+    // 检查错误是否为 OpenAI APIError
+    if (error instanceof OpenAI.APIError) {
+      let errorResult: any;
+      // 如果错误是 OpenAI APIError，那么会有一个 error 对象
+      if (error.error) {
+        errorResult = error.error;
+      } else if (error.cause) {
+        errorResult = error.cause;
+      }
+      // 如果没有其他请求错误，错误对象是一个类似 Response 的对象
+      else {
+        errorResult = { headers: error.headers, stack: error.stack, status: error.status };
+      }
+      console.error(errorResult);
+      // 返回错误响应
+      return createErrorResponse(ChatErrorType.OpenAIBizError, {
+        endpoint: openai.baseURL,
+        error: errorResult,
+      });
+    }
+    console.error(error);
+    return createErrorResponse(ChatErrorType.InternalServerError, {
+      endpoint: openai.baseURL,
+      error: JSON.stringify(error),
+    });
+  }
 };
 ```
 
@@ -64,35 +88,45 @@ export const createChatCompletion = async ({ payload, openai }: CreateChatComple
 
 ### 前端集成
 
-在 `src/services/chatModel.ts` 文件中，我们定义了 `fetchChatModel` 方法，该方法首先对 payload 数据进行前置处理，然后发送 POST 请求到后端的 `/chat` 接口，并将请求结果返回。
+在 `src/services/chat.ts` 文件中，我们定义了 `ChatService` 类。这个类提供了一些方法来处理与 OpenAI 聊天 API 的交互。
+
+`createAssistantMessage` 方法用于创建一个新的助手消息。它接收一个包含插件、消息和其他参数的对象，以及一个可选的 `FetchOptions` 对象。这个方法会合并默认的代理配置和传入的参数，预处理消息和工具，然后调用 `getChatCompletion` 方法获取聊天完成任务。
+
+`getChatCompletion` 方法用于获取聊天完成任务。它接收一个 `OpenAIChatStreamPayload` 对象和一个可选的 `FetchOptions` 对象。这个方法会合并默认的代理配置和传入的参数，然后发送 POST 请求到 OpenAI 的聊天 API。
+
+`runPluginApi` 方法用于运行插件 API 并获取结果。它接收一个 `PluginRequestPayload` 对象和一个可选的 `FetchOptions` 对象。这个方法会从工具存储中获取状态，通过插件标识符获取插件设置和清单，然后发送 POST 请求到插件的网关 URL。
+
+`fetchPresetTaskResult` 方法用于获取预设任务的结果。它使用 `fetchAIFactory` 工厂函数创建一个新的函数，这个函数接收一个聊天完成任务的参数，并返回一个 Promise。当 Promise 解析时，返回的结果是聊天完成任务的结果。
+
+`processMessages` 方法用于处理聊天消息。它接收一个聊天消息数组，一个可选的模型名称，和一个可选的工具数组。这个方法会处理消息内容，将输入的 `messages` 数组映射为 `OpenAIChatMessage` 类型的数组，如果存在启用的工具，将工具的系统角色添加到系统消息中。
 
 ```ts
-export const fetchChatModel = (
-  { plugins: enabledPlugins, ...params }: Partial<OpenAIStreamPayload>,
-  options?: FetchChatModelOptions,
-) => {
-  const payload = merge(
-    {
-      model: initialLobeAgentConfig.model,
-      stream: true,
-      ...initialLobeAgentConfig.params,
-    },
-    params,
-  );
-
-  const filterFunctions: ChatCompletionFunctions[] = pluginSelectors.enabledSchema(enabledPlugins)(
-    usePluginStore.getState(),
-  );
-
-  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
-
-  return fetch(OPENAI_URLS.chat, {
-    body: JSON.stringify({ ...payload, functions }),
-    headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
-    method: 'POST',
-    signal: options?.signal,
-  });
-};
+class ChatService {
+  // 创建一个新的助手消息
+  createAssistantMessage(params: object, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 获取聊天完成任务
+  getChatCompletion(payload: OpenAIChatStreamPayload, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 运行插件 API 并获取结果
+  runPluginApi(payload: PluginRequestPayload, fetchOptions?: FetchOptions) {
+    // 实现细节...
+  }
+
+  // 获取预设任务的结果
+  fetchPresetTaskResult() {
+    // 实现细节...
+  }
+
+  // 处理聊天消息
+  processMessages(messages: ChatMessage[], modelName?: string, tools?: Tool[]) {
+    // 实现细节...
+  }
+}
 ```
 
 ### 使用流式获取结果
@@ -103,6 +137,7 @@ export const fetchChatModel = (
 export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
   const response = await fetchFn();
 
+  // 如果不 ok 说明有请求错误
   if (!response.ok) {
     const chatMessageError = await getMessageError(response);
 
@@ -115,7 +150,7 @@ export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchS
   const data = response.body;
 
   if (!data) return;
-
+  let output = '';
   const reader = data.getReader();
   const decoder = new TextDecoder();
 
@@ -124,11 +159,14 @@ export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchS
   while (!done) {
     const { value, done: doneReading } = await reader.read();
     done = doneReading;
-    const chunkValue = decoder.decode(value);
+    const chunkValue = decoder.decode(value, { stream: true });
 
+    output += chunkValue;
     options.onMessageHandle?.(chunkValue);
   }
 
+  await options?.onFinish?.(output);
+
   return returnRes;
 };
 ```

package/next.config.mjs

@@ -20,7 +20,6 @@ const withPWA = nextPWA({
 const nextConfig = {
   compress: isProd,
   experimental: {
-    forceSwcTransforms: true,
     optimizePackageImports: [
       'modern-screenshot',
       'emoji-mart',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.118.4",
+  "version": "0.118.6",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import pkg from '@/../package.json';
-import ChatList from '@/features/Conversation/ChatList';
+import ChatList from '@/features/Conversation/container';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Assistant.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { ErrorActionsBar } from './Error';
 import { useCustomActions } from './customAction';
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Error.tsx

@@ -1,7 +1,9 @@
-import { ActionIconGroup, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { ActionsBarProps } from '@lobehub/ui/es/ChatList/ActionsBar';
 import { memo } from 'react';
 
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const ErrorActionsBar = memo<ActionsBarProps>(({ text, onActionClick }) => {
   const { regenerate, del } = useChatListActionsBar(text);
 

package/src/features/Conversation/{ChatList/Actions → Actions}/Fallback.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const DefaultActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { del } = useChatListActionsBar(text);
   return (

package/src/features/Conversation/{ChatList/Actions → Actions}/Function.tsx

@@ -1,6 +1,9 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+
 export const FunctionActionsBar: RenderAction = memo(({ text, onActionClick }) => {
   const { regenerate, divider, del } = useChatListActionsBar(text);
   return (

package/src/features/Conversation/{ChatList/Actions → Actions}/User.tsx

@@ -1,6 +1,8 @@
-import { ActionIconGroup, RenderAction, useChatListActionsBar } from '@lobehub/ui';
+import { ActionIconGroup } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderAction } from '../components/ChatList';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
 import { useCustomActions } from './customAction';
 
 export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {

package/src/features/Conversation/{ChatList/Actions → Actions}/index.ts

@@ -1,7 +1,6 @@
-import { ChatListProps } from '@lobehub/ui';
-
 import { useChatStore } from '@/store/chat';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
 import { FunctionActionsBar } from './Function';

package/src/features/Conversation/{ChatList/Error → Error}/InvalidAccess.tsx

@@ -1,4 +1,4 @@
-import { Icon, RenderErrorMessage } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { Button, Input, Segmented } from 'antd';
 import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -8,6 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
 

package/src/features/Conversation/{ChatList/Error → Error}/OpenAPIKey.tsx

@@ -1,6 +1,6 @@
-import { RenderErrorMessage } from '@lobehub/ui';
 import { memo } from 'react';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer } from './style';
 

package/src/features/Conversation/{ChatList/Error → Error}/OpenAiBizError.tsx

@@ -1,7 +1,8 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../components/ChatList';
 import OpenAPIKey from './OpenAPIKey';
 
 interface OpenAIError {

package/src/features/Conversation/{ChatList/Error → Error}/Plugin/PluginError.tsx

@@ -1,7 +1,9 @@
-import { Highlighter, RenderErrorMessage } from '@lobehub/ui';
+import { Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { RenderErrorMessage } from '../../components/ChatList';
+
 interface OpenAIError {
   code: 'invalid_api_key' | string;
   message: string;

package/src/features/Conversation/{ChatList/Error → Error}/Plugin/PluginSettings.tsx

@@ -1,4 +1,4 @@
-import { Avatar, RenderErrorMessage } from '@lobehub/ui';
+import { Avatar } from '@lobehub/ui';
 import { Button, Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -11,6 +11,7 @@ import { useChatStore } from '@/store/chat';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
+import { RenderErrorMessage } from '../../components/ChatList';
 import { ErrorActionContainer, useStyles } from '../style';
 
 const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {

package/src/features/Conversation/{ChatList/Error → Error}/index.tsx

@@ -1,8 +1,8 @@
 import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
-import { ChatListProps } from '@lobehub/ui';
 
 import { ChatErrorType } from '@/types/fetch';
 
+import { ChatListProps } from '../components/ChatList';
 import InvalidAccess from './InvalidAccess';
 import OpenAPIKey from './OpenAPIKey';
 import OpenAiBizError from './OpenAiBizError';

package/src/features/Conversation/{ChatList/Extras → Extras}/Translate.tsx

@@ -10,7 +10,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { ChatTranslate } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 const useStyles = createStyles(({ stylish }) => ({
   markdown: stylish.markdownInChat,

package/src/features/Conversation/{ChatList/Extras → Extras}/index.ts

@@ -1,5 +1,4 @@
-import { ChatListProps, RenderMessageExtra } from '@lobehub/ui';
-
+import { ChatListProps, RenderMessageExtra } from '../components/ChatList';
 import { AssistantMessageExtra } from './Assistant';
 import { UserMessageExtra } from './User';
 

package/src/features/Conversation/{ChatList/Messages → Messages}/Default.tsx

@@ -3,7 +3,7 @@ import { ReactNode, memo } from 'react';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const DefaultMessage = memo<
   ChatMessage & {

package/src/features/Conversation/{ChatList/Messages → Messages}/User.tsx

@@ -5,7 +5,7 @@ import FileList from '@/components/FileList';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/message';
 
-import BubblesLoading from '../Loading';
+import BubblesLoading from '../components/BubblesLoading';
 
 export const UserMessage = memo<
   ChatMessage & {

package/src/features/Conversation/{ChatList/Messages → Messages}/index.ts

@@ -1,4 +1,3 @@
-import { ChatListProps } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 
@@ -7,16 +6,17 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
+import { ChatListProps } from '../components/ChatList';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
 import { FunctionMessage } from './Function';
 import { UserMessage } from './User';
 
 export const renderMessages: ChatListProps['renderMessages'] = {
-  assistant: AssistantMessage as any,
-  default: DefaultMessage as any,
-  function: FunctionMessage as any,
-  user: UserMessage as any,
+  assistant: AssistantMessage,
+  default: DefaultMessage,
+  function: FunctionMessage,
+  user: UserMessage,
 };
 
 export const useAvatarsClick = (): ChatListProps['onAvatarsClick'] => {

package/src/features/Conversation/{ChatList/Plugins → Plugins}/Render/Loading.tsx

@@ -1,11 +1,10 @@
-import {createStyles} from 'antd-style';
-import {useTranslation} from 'react-i18next';
-import {Flexbox} from 'react-layout-kit';
-import {memo} from "react";
-
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(
-  ({css, token}) => css`
+  ({ css, token }) => css`
     position: relative;
 
     overflow: hidden;
@@ -46,16 +45,16 @@ const useStyles = createStyles(
     }
   `,
 );
- const Loading = memo(() => {
-  const {t} = useTranslation('plugin');
-  const {styles} = useStyles();
+const Loading = memo(() => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
 
   return (
     <Flexbox align={'center'} gap={8} padding={16}>
-      <span className={styles}/>
+      <span className={styles} />
       {t('loading.content')}
     </Flexbox>
   );
 });
 
-export default Loading
+export default Loading;

package/src/features/Conversation/components/ChatList/ActionsBar.tsx

@@ -0,0 +1,27 @@
+import { ActionIconGroup, type ActionIconGroupProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useChatListActionsBar } from '../../hooks/useChatListActionsBar';
+
+export interface ActionsBarProps extends ActionIconGroupProps {
+  text?: {
+    copy?: string;
+    delete?: string;
+    edit?: string;
+    regenerate?: string;
+  };
+}
+
+const ActionsBar = memo<ActionsBarProps>(({ text, ...rest }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[edit, copy, regenerate, divider, del]}
+      items={[regenerate, edit]}
+      type="ghost"
+      {...rest}
+    />
+  );
+});
+
+export default ActionsBar;