@lobehub/chat 1.49.10 → 1.49.12

package/locales/vi-VN/models.json

@@ -176,6 +176,9 @@
   "Pro/meta-llama/Meta-Llama-3.1-8B-Instruct": {
     "description": "Meta Llama 3.1 là một phần của gia đình mô hình ngôn ngữ lớn đa ngôn ngữ do Meta phát triển, bao gồm các biến thể tiền huấn luyện và tinh chỉnh theo chỉ dẫn với quy mô tham số 8B, 70B và 405B. Mô hình 8B này được tối ưu hóa cho các tình huống đối thoại đa ngôn ngữ, thể hiện xuất sắc trong nhiều bài kiểm tra chuẩn ngành. Mô hình được đào tạo bằng hơn 15 triệu tỷ tokens từ dữ liệu công khai và sử dụng các kỹ thuật như tinh chỉnh giám sát và học tăng cường phản hồi của con người để nâng cao tính hữu ích và an toàn của mô hình. Llama 3.1 hỗ trợ sinh văn bản và sinh mã, với thời điểm cắt kiến thức là tháng 12 năm 2023."
   },
+  "Qwen/QVQ-72B-Preview": {
+    "description": "QVQ-72B-Preview là một mô hình nghiên cứu do đội ngũ Qwen phát triển, tập trung vào khả năng suy diễn hình ảnh, có lợi thế độc đáo trong việc hiểu các cảnh phức tạp và giải quyết các vấn đề toán học liên quan đến hình ảnh."
+  },
   "Qwen/QwQ-32B-Preview": {
     "description": "QwQ-32B-Preview là mô hình nghiên cứu thử nghiệm mới nhất của Qwen, tập trung vào việc nâng cao khả năng suy luận của AI. Thông qua việc khám phá các cơ chế phức tạp như trộn ngôn ngữ và suy luận đệ quy, những lợi thế chính bao gồm khả năng phân tích suy luận mạnh mẽ, khả năng toán học và lập trình. Tuy nhiên, cũng có những vấn đề về chuyển đổi ngôn ngữ, vòng lặp suy luận, các vấn đề an toàn và sự khác biệt về các khả năng khác."
   },
@@ -530,12 +533,21 @@
   "databricks/dbrx-instruct": {
     "description": "DBRX Instruct cung cấp khả năng xử lý chỉ dẫn đáng tin cậy, hỗ trợ nhiều ứng dụng trong ngành."
   },
+  "deepseek-ai/DeepSeek-R1": {
+    "description": "DeepSeek-R1 là một mô hình suy diễn được điều khiển bởi học tăng cường (RL), giải quyết các vấn đề về tính lặp lại và khả năng đọc hiểu trong mô hình. Trước khi áp dụng RL, DeepSeek-R1 đã giới thiệu dữ liệu khởi động lạnh, tối ưu hóa thêm hiệu suất suy diễn. Nó thể hiện hiệu suất tương đương với OpenAI-o1 trong các nhiệm vụ toán học, mã và suy diễn, và thông qua phương pháp đào tạo được thiết kế cẩn thận, nâng cao hiệu quả tổng thể."
+  },
   "deepseek-ai/DeepSeek-V2.5": {
     "description": "DeepSeek V2.5 kết hợp các đặc điểm xuất sắc của các phiên bản trước, tăng cường khả năng tổng quát và mã hóa."
   },
+  "deepseek-ai/DeepSeek-V3": {
+    "description": "DeepSeek-V3 là một mô hình ngôn ngữ hỗn hợp chuyên gia (MoE) với 6710 tỷ tham số, sử dụng chú ý tiềm ẩn đa đầu (MLA) và kiến trúc DeepSeekMoE, kết hợp với chiến lược cân bằng tải không có tổn thất phụ trợ, tối ưu hóa hiệu suất suy diễn và đào tạo. Thông qua việc được tiền huấn luyện trên 14.8 triệu tỷ token chất lượng cao, và thực hiện tinh chỉnh giám sát và học tăng cường, DeepSeek-V3 vượt trội về hiệu suất so với các mô hình mã nguồn mở khác, gần gũi với các mô hình đóng nguồn hàng đầu."
+  },
   "deepseek-ai/deepseek-llm-67b-chat": {
     "description": "DeepSeek 67B là mô hình tiên tiến được huấn luyện cho các cuộc đối thoại phức tạp."
   },
+  "deepseek-ai/deepseek-vl2": {
+    "description": "DeepSeek-VL2 là một mô hình ngôn ngữ hình ảnh hỗn hợp chuyên gia (MoE) được phát triển dựa trên DeepSeekMoE-27B, sử dụng kiến trúc MoE với kích hoạt thưa, đạt được hiệu suất xuất sắc chỉ với 4.5B tham số được kích hoạt. Mô hình này thể hiện xuất sắc trong nhiều nhiệm vụ như hỏi đáp hình ảnh, nhận diện ký tự quang học, hiểu tài liệu/bảng/biểu đồ và định vị hình ảnh."
+  },
   "deepseek-chat": {
     "description": "Mô hình mã nguồn mở mới kết hợp khả năng tổng quát và mã, không chỉ giữ lại khả năng đối thoại tổng quát của mô hình Chat ban đầu và khả năng xử lý mã mạnh mẽ của mô hình Coder, mà còn tốt hơn trong việc phù hợp với sở thích của con người. Hơn nữa, DeepSeek-V2.5 cũng đã đạt được sự cải thiện lớn trong nhiều khía cạnh như nhiệm vụ viết, theo dõi chỉ dẫn."
   },
@@ -548,6 +560,9 @@
   "deepseek-coder-v2:236b": {
     "description": "DeepSeek Coder V2 là mô hình mã nguồn mở hỗn hợp chuyên gia, thể hiện xuất sắc trong các nhiệm vụ mã, tương đương với GPT4-Turbo."
   },
+  "deepseek-r1": {
+    "description": "DeepSeek-R1 là một mô hình suy diễn được điều khiển bởi học tăng cường (RL), giải quyết các vấn đề về tính lặp lại và khả năng đọc hiểu trong mô hình. Trước khi áp dụng RL, DeepSeek-R1 đã giới thiệu dữ liệu khởi động lạnh, tối ưu hóa thêm hiệu suất suy diễn. Nó thể hiện hiệu suất tương đương với OpenAI-o1 trong các nhiệm vụ toán học, mã và suy diễn, và thông qua phương pháp đào tạo được thiết kế cẩn thận, nâng cao hiệu quả tổng thể."
+  },
   "deepseek-reasoner": {
     "description": "Mô hình suy diễn do DeepSeek phát triển. Trước khi đưa ra câu trả lời cuối cùng, mô hình sẽ xuất ra một đoạn nội dung chuỗi suy nghĩ để nâng cao độ chính xác của câu trả lời cuối."
   },

package/locales/zh-CN/components.json

@@ -86,6 +86,30 @@
     "emptyModel": "没有启用的模型，请前往设置开启",
     "provider": "提供商"
   },
+  "OllamaSetupGuide": {
+    "cors": {
+      "description": "因浏览器安全限制，你需要为 Ollama 进行跨域配置后方可正常使用。",
+      "linux": {
+        "env": "在 [Service] 部分下添加 `Environment`，添加 OLLAMA_ORIGINS 环境变量：",
+        "reboot": "重载 systemd 并重启 Ollama",
+        "systemd": "调用 systemd 编辑 ollama 服务："
+      },
+      "macos": "请打开「终端」应用程序，并粘贴以下指令，并按回车运行",
+      "reboot": "请在执行完成后重启 Ollama 服务",
+      "title": "配置 Ollama 允许跨域访问",
+      "windows": "在 Windows 上，点击「控制面板」，进入编辑系统环境变量。为您的用户账户新建名为 「OLLAMA_ORIGINS」 的环境变量，值为 * ，点击 「OK/应用」 保存"
+    },
+    "install": {
+      "description": "请确认你已经开启 Ollama ，如果没有下载 Ollama ，请前往官网<1>下载</1>",
+      "docker": "如果你更倾向于使用 Docker，Ollama 也提供了官方 Docker 镜像，你可以通过以下命令拉取：",
+      "linux": {
+        "command": "通过以下命令安装：",
+        "manual": "或者，你也可以参考 <1>Linux 手动安装指南</1> 自行安装"
+      },
+      "title": "在本地安装并开启 Ollama 应用",
+      "windowsTab": "Windows (预览版)"
+    }
+  },
   "Thinking": {
     "thinking": "深度思考中...",
     "thought": "已深度思考（用时 {{duration}} 秒）",

package/locales/zh-CN/modelProvider.json

@@ -154,30 +154,6 @@
       "desc": "必须包含http(s)://，本地未额外指定可留空",
       "title": "Ollama 服务地址"
     },
-    "setup": {
-      "cors": {
-        "description": "因浏览器安全限制，你需要为 Ollama 进行跨域配置后方可正常使用。",
-        "linux": {
-          "env": "在 [Service] 部分下添加 `Environment`，添加 OLLAMA_ORIGINS 环境变量：",
-          "reboot": "重载 systemd 并重启 Ollama",
-          "systemd": "调用 systemd 编辑 ollama 服务："
-        },
-        "macos": "请打开「终端」应用程序，并粘贴以下指令，并按回车运行",
-        "reboot": "请在执行完成后重启 Ollama 服务",
-        "title": "配置 Ollama 允许跨域访问",
-        "windows": "在 Windows 上，点击「控制面板」，进入编辑系统环境变量。为您的用户账户新建名为 「OLLAMA_ORIGINS」 的环境变量，值为 * ，点击 「OK/应用」 保存"
-      },
-      "install": {
-        "description": "请确认你已经开启 Ollama ，如果没有下载 Ollama ，请前往官网<1>下载</1>",
-        "docker": "如果你更倾向于使用 Docker，Ollama 也提供了官方 Docker 镜像，你可以通过以下命令拉取：",
-        "linux": {
-          "command": "通过以下命令安装：",
-          "manual": "或者，你也可以参考 <1>Linux 手动安装指南</1> 自行安装"
-        },
-        "title": "在本地安装并开启 Ollama 应用",
-        "windowsTab": "Windows (预览版)"
-      }
-    },
     "title": "Ollama",
     "unlock": {
       "cancel": "取消下载",

package/locales/zh-CN/models.json

@@ -176,6 +176,9 @@
   "Pro/meta-llama/Meta-Llama-3.1-8B-Instruct": {
     "description": "Meta Llama 3.1 是由 Meta 开发的多语言大型语言模型家族，包括 8B、70B 和 405B 三种参数规模的预训练和指令微调变体。该 8B 指令微调模型针对多语言对话场景进行了优化，在多项行业基准测试中表现优异。模型训练使用了超过 15 万亿个 tokens 的公开数据，并采用了监督微调和人类反馈强化学习等技术来提升模型的有用性和安全性。Llama 3.1 支持文本生成和代码生成，知识截止日期为 2023 年 12 月"
   },
+  "Qwen/QVQ-72B-Preview": {
+    "description": "QVQ-72B-Preview 是由 Qwen 团队开发的专注于视觉推理能力的研究型模型，其在复杂场景理解和解决视觉相关的数学问题方面具有独特优势。"
+  },
   "Qwen/QwQ-32B-Preview": {
     "description": "QwQ模型是由 Qwen 团队开发的实验性研究模型，专注于增强 AI 推理能力。"
   },
@@ -530,12 +533,21 @@
   "databricks/dbrx-instruct": {
     "description": "DBRX Instruct 提供高可靠性的指令处理能力，支持多行业应用。"
   },
+  "deepseek-ai/DeepSeek-R1": {
+    "description": "DeepSeek-R1 是一款强化学习（RL）驱动的推理模型，解决了模型中的重复性和可读性问题。在 RL 之前，DeepSeek-R1 引入了冷启动数据，进一步优化了推理性能。它在数学、代码和推理任务中与 OpenAI-o1 表现相当，并且通过精心设计的训练方法，提升了整体效果。"
+  },
   "deepseek-ai/DeepSeek-V2.5": {
-    "description": "DeepSeek-V2.5 是 DeepSeek-V2-Chat 和 DeepSeek-Coder-V2-Instruct 的升级版本，集成了两个先前版本的通用和编码能力。该模型在多个方面进行了优化，包括写作和指令跟随能力，更好地与人类偏好保持一致。DeepSeek-V2.5 在各种评估基准上都取得了显著的提升，如 AlpacaEval 2.0、ArenaHard、AlignBench 和 MT-Bench 等"
+    "description": "DeepSeek-V2.5 是 DeepSeek-V2-Chat 和 DeepSeek-Coder-V2-Instruct 的升级版本，集成了两个先前版本的通用和编码能力。该模型在多个方面进行了优化，包括写作和指令跟随能力，更好地与人类偏好保持一致。DeepSeek-V2.5 在各种评估基准上都取得了显著的提升，如 AlpacaEval 2.0、ArenaHard、AlignBench 和 MT-Bench 等。"
+  },
+  "deepseek-ai/DeepSeek-V3": {
+    "description": "DeepSeek-V3 是一款拥有 6710 亿参数的混合专家（MoE）语言模型，采用多头潜在注意力（MLA）和 DeepSeekMoE 架构，结合无辅助损失的负载平衡策略，优化推理和训练效率。通过在 14.8 万亿高质量tokens上预训练，并进行监督微调和强化学习，DeepSeek-V3 在性能上超越其他开源模型，接近领先闭源模型。"
   },
   "deepseek-ai/deepseek-llm-67b-chat": {
     "description": "DeepSeek LLM Chat (67B) 是创新的 AI 模型 提供深度语言理解和互动能力。"
   },
+  "deepseek-ai/deepseek-vl2": {
+    "description": "DeepSeek-VL2 是一个基于 DeepSeekMoE-27B 开发的混合专家（MoE）视觉语言模型，采用稀疏激活的 MoE 架构，在仅激活 4.5B 参数的情况下实现了卓越性能。该模型在视觉问答、光学字符识别、文档/表格/图表理解和视觉定位等多个任务中表现优异。"
+  },
   "deepseek-chat": {
     "description": "融合通用与代码能力的全新开源模型, 不仅保留了原有 Chat 模型的通用对话能力和 Coder 模型的强大代码处理能力，还更好地对齐了人类偏好。此外，DeepSeek-V2.5 在写作任务、指令跟随等多个方面也实现了大幅提升。"
   },
@@ -548,6 +560,9 @@
   "deepseek-coder-v2:236b": {
     "description": "DeepSeek Coder V2 是开源的混合专家代码模型，在代码任务方面表现优异，与 GPT4-Turbo 相媲美。"
   },
+  "deepseek-r1": {
+    "description": "DeepSeek-R1 是一款强化学习（RL）驱动的推理模型，解决了模型中的重复性和可读性问题。在 RL 之前，DeepSeek-R1 引入了冷启动数据，进一步优化了推理性能。它在数学、代码和推理任务中与 OpenAI-o1 表现相当，并且通过精心设计的训练方法，提升了整体效果。"
+  },
   "deepseek-reasoner": {
     "description": "DeepSeek 推出的推理模型。在输出最终回答之前，模型会先输出一段思维链内容，以提升最终答案的准确性。"
   },

package/locales/zh-TW/components.json

@@ -86,6 +86,30 @@
     "emptyModel": "沒有啟用的模型，請前往設定開啟",
     "provider": "提供商"
   },
+  "OllamaSetupGuide": {
+    "cors": {
+      "description": "因瀏覽器安全限制，你需要為 Ollama 進行跨域配置後方可正常使用。",
+      "linux": {
+        "env": "在 [Service] 部分下添加 `Environment`，添加 OLLAMA_ORIGINS 環境變數：",
+        "reboot": "重載 systemd 並重啟 Ollama",
+        "systemd": "調用 systemd 編輯 ollama 服務："
+      },
+      "macos": "請打開「終端」應用程式，並粘貼以下指令，然後按回車執行",
+      "reboot": "請在執行完成後重啟 Ollama 服務",
+      "title": "配置 Ollama 允許跨域訪問",
+      "windows": "在 Windows 上，點擊「控制面板」，進入編輯系統環境變數。為您的用戶帳戶新建名為「OLLAMA_ORIGINS」的環境變數，值為 *，點擊「確定/應用」保存"
+    },
+    "install": {
+      "description": "請確認你已經啟動 Ollama，如果沒有下載 Ollama，請前往官網<1>下載</1>",
+      "docker": "如果你更傾向於使用 Docker，Ollama 也提供了官方 Docker 映像，你可以通過以下命令拉取：",
+      "linux": {
+        "command": "通過以下命令安裝：",
+        "manual": "或者，你也可以參考 <1>Linux 手動安裝指南</1> 自行安裝"
+      },
+      "title": "在本地安裝並啟動 Ollama 應用",
+      "windowsTab": "Windows (預覽版)"
+    }
+  },
   "Thinking": {
     "thinking": "深度思考中...",
     "thought": "已深度思考（用時 {{duration}} 秒）",

package/locales/zh-TW/modelProvider.json

@@ -154,30 +154,6 @@
       "desc": "必須包含http(s)://，本地未額外指定可留空",
       "title": "接口代理地址"
     },
-    "setup": {
-      "cors": {
-        "description": "因瀏覽器安全限制，您需要為 Ollama 進行跨域配置後才能正常使用。",
-        "linux": {
-          "env": "在 [Service] 部分下添加 `Environment`，新增 OLLAMA_ORIGINS 環境變數：",
-          "reboot": "重新載入 systemd 並重新啟動 Ollama",
-          "systemd": "呼叫 systemd 編輯 ollama 服務："
-        },
-        "macos": "請開啟「終端」應用程式，貼上以下指令，然後按 Enter 執行",
-        "reboot": "執行完成後請重新啟動 Ollama 服務",
-        "title": "配置 Ollama 允許跨域訪問",
-        "windows": "在 Windows 上，點擊「控制面板」，進入編輯系統環境變數。為您的使用者帳戶新增名為「OLLAMA_ORIGINS」的環境變數，值為 *，點擊「確定/應用」保存"
-      },
-      "install": {
-        "description": "請確認您已經啟用 Ollama，如果尚未下載 Ollama，請前往官網<1>下載</1>",
-        "docker": "如果您更傾向於使用 Docker，Ollama 也提供了官方 Docker 映像，您可以透過以下命令拉取：",
-        "linux": {
-          "command": "透過以下命令安裝：",
-          "manual": "或者，您也可以參考 <1>Linux 手動安裝指南</1> 自行安裝"
-        },
-        "title": "在本地安裝並啟動 Ollama 應用",
-        "windowsTab": "Windows (預覽版)"
-      }
-    },
     "title": "Ollama",
     "unlock": {
       "cancel": "取消下載",

package/locales/zh-TW/models.json

@@ -176,6 +176,9 @@
   "Pro/meta-llama/Meta-Llama-3.1-8B-Instruct": {
     "description": "Meta Llama 3.1 是由 Meta 開發的多語言大型語言模型家族，包括 8B、70B 和 405B 三種參數規模的預訓練和指令微調變體。該 8B 指令微調模型針對多語言對話場景進行了優化，在多項行業基準測試中表現優異。模型訓練使用了超過 15 萬億個 tokens 的公開數據，並採用了監督微調和人類反饋強化學習等技術來提升模型的有用性和安全性。Llama 3.1 支持文本生成和代碼生成，知識截止日期為 2023 年 12 月"
   },
+  "Qwen/QVQ-72B-Preview": {
+    "description": "QVQ-72B-Preview 是由 Qwen 團隊開發的專注於視覺推理能力的研究型模型，其在複雜場景理解和解決視覺相關的數學問題方面具有獨特優勢。"
+  },
   "Qwen/QwQ-32B-Preview": {
     "description": "QwQ-32B-Preview是Qwen 最新的實驗性研究模型，專注於提升AI推理能力。通過探索語言混合、遞歸推理等複雜機制，主要優勢包括強大的推理分析能力、數學和編程能力。與此同時，也存在語言切換問題、推理循環、安全性考量、其他能力方面的差異。"
   },
@@ -530,12 +533,21 @@
   "databricks/dbrx-instruct": {
     "description": "DBRX Instruct 提供高可靠性的指令處理能力，支持多行業應用。"
   },
+  "deepseek-ai/DeepSeek-R1": {
+    "description": "DeepSeek-R1 是一款強化學習（RL）驅動的推理模型，解決了模型中的重複性和可讀性問題。在 RL 之前，DeepSeek-R1 引入了冷啟動數據，進一步優化了推理性能。它在數學、程式碼和推理任務中與 OpenAI-o1 表現相當，並且通過精心設計的訓練方法，提升了整體效果。"
+  },
   "deepseek-ai/DeepSeek-V2.5": {
     "description": "DeepSeek V2.5 集合了先前版本的優秀特徵，增強了通用和編碼能力。"
   },
+  "deepseek-ai/DeepSeek-V3": {
+    "description": "DeepSeek-V3 是一款擁有 6710 億參數的混合專家（MoE）語言模型，採用多頭潛在注意力（MLA）和 DeepSeekMoE 架構，結合無輔助損失的負載平衡策略，優化推理和訓練效率。通過在 14.8 萬億高品質 tokens 上預訓練，並進行監督微調和強化學習，DeepSeek-V3 在性能上超越其他開源模型，接近領先閉源模型。"
+  },
   "deepseek-ai/deepseek-llm-67b-chat": {
     "description": "DeepSeek 67B 是為高複雜性對話訓練的先進模型。"
   },
+  "deepseek-ai/deepseek-vl2": {
+    "description": "DeepSeek-VL2 是一個基於 DeepSeekMoE-27B 開發的混合專家（MoE）視覺語言模型，採用稀疏激活的 MoE 架構，在僅激活 4.5B 參數的情況下實現了卓越性能。該模型在視覺問答、光學字符識別、文檔/表格/圖表理解和視覺定位等多個任務中表現優異。"
+  },
   "deepseek-chat": {
     "description": "融合通用與代碼能力的全新開源模型，不僅保留了原有 Chat 模型的通用對話能力和 Coder 模型的強大代碼處理能力，還更好地對齊了人類偏好。此外，DeepSeek-V2.5 在寫作任務、指令跟隨等多個方面也實現了大幅提升。"
   },
@@ -548,6 +560,9 @@
   "deepseek-coder-v2:236b": {
     "description": "DeepSeek Coder V2 是開源的混合專家代碼模型，在代碼任務方面表現優異，與 GPT4-Turbo 相媲美。"
   },
+  "deepseek-r1": {
+    "description": "DeepSeek-R1 是一款強化學習（RL）驅動的推理模型，解決了模型中的重複性和可讀性問題。在 RL 之前，DeepSeek-R1 引入了冷啟動數據，進一步優化了推理性能。它在數學、程式碼和推理任務中與 OpenAI-o1 表現相當，並且通過精心設計的訓練方法，提升了整體效果。"
+  },
   "deepseek-reasoner": {
     "description": "DeepSeek 推出的推理模型。在輸出最終回答之前，模型會先輸出一段思維鏈內容，以提升最終答案的準確性。"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.49.10",
+  "version": "1.49.12",
   "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/(main)/chat/(workspace)/@portal/_layout/Mobile.tsx

@@ -28,6 +28,7 @@ const Layout = ({ children }: PropsWithChildren) => {
     <Modal
       allowFullscreen
       className={cx(isPortalThread && styles.container)}
+      footer={null}
       height={'95%'}
       onCancel={() => togglePortal(false)}
       open={showMobilePortal}

package/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
+import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { rgba } from 'polished';
-import { PropsWithChildren, memo } from 'react';
+import { PropsWithChildren, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import {
@@ -13,6 +14,8 @@ import {
 } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors, portalThreadSelectors } from '@/store/chat/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   content: css`
@@ -49,6 +52,24 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
     portalThreadSelectors.showThread(s),
   ]);
 
+  const [portalWidth, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.portalWidth(s),
+    s.updateSystemStatus,
+  ]);
+
+  const [tmpWidth, setWidth] = useState(portalWidth);
+  if (tmpWidth !== portalWidth) setWidth(portalWidth);
+
+  const handleSizeChange: DraggablePanelProps['onSizeChange'] = (_, size) => {
+    if (!size) return;
+    const nextWidth = typeof size.width === 'string' ? Number.parseInt(size.width) : size.width;
+    if (!nextWidth) return;
+
+    if (isEqual(nextWidth, portalWidth)) return;
+    setWidth(nextWidth);
+    updateSystemStatus({ portalWidth: nextWidth });
+  };
+
   return (
     showInspector && (
       <DraggablePanel
@@ -56,6 +77,7 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
         classNames={{
           content: styles.content,
         }}
+        defaultSize={{ width: tmpWidth }}
         expand
         hanlderStyle={{ display: 'none' }}
         maxWidth={CHAT_PORTAL_MAX_WIDTH}
@@ -63,9 +85,11 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
           showArtifactUI || showToolUI || showThread ? CHAT_PORTAL_TOOL_UI_WIDTH : CHAT_PORTAL_WIDTH
         }
         mode={md ? 'fixed' : 'float'}
+        onSizeChange={handleSizeChange}
         placement={'right'}
         showHandlerWhenUnexpand={false}
         showHandlerWideArea={false}
+        size={{ height: '100%', width: portalWidth }}
       >
         <DraggablePanelContainer
           style={{

package/src/app/(main)/settings/provider/(detail)/[id]/page.tsx

@@ -2,10 +2,12 @@ import { redirect } from 'next/navigation';
 
 import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { isServerMode } from '@/const/version';
+import { AiInfraRepos } from '@/database/repositories/aiInfra';
 import { serverDB } from '@/database/server';
-import { AiProviderModel } from '@/database/server/models/aiProvider';
+import { getServerGlobalConfig } from '@/server/globalConfig';
 import { KeyVaultsGateKeeper } from '@/server/modules/KeyVaultsEncrypt';
 import { PagePropsWithId } from '@/types/next';
+import { ProviderConfig } from '@/types/user/settings';
 import { getUserAuth } from '@/utils/server/auth';
 
 import ClientMode from './ClientMode';
@@ -22,9 +24,14 @@ const Page = async (props: PagePropsWithId) => {
   if (isServerMode) {
     const { userId } = await getUserAuth();
 
-    const aiProviderModel = new AiProviderModel(serverDB, userId!);
+    const { aiProvider } = getServerGlobalConfig();
+    const aiInfraRepos = new AiInfraRepos(
+      serverDB,
+      userId!,
+      aiProvider as Record<string, ProviderConfig>,
+    );
 
-    const userCard = await aiProviderModel.getAiProviderById(
+    const userCard = await aiInfraRepos.getAiProviderDetail(
       params.id,
       KeyVaultsGateKeeper.getUserKeyVaults,
     );

package/src/app/(main)/settings/provider/(detail)/ollama/CheckError.tsx

@@ -0,0 +1,70 @@
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { ReactNode } from 'react';
+
+import { ChatMessageError } from '@/types/message';
+
+import Container from './Container';
+
+const loading = () => <Skeleton active style={{ width: 400 }} />;
+
+const OllamaSetupGuide = dynamic(() => import('@/components/OllamaSetupGuide'), {
+  loading,
+  ssr: false,
+});
+
+const InvalidModel = dynamic(() => import('./OllamaModelDownloader'), {
+  loading,
+  ssr: false,
+});
+
+interface OllamaError {
+  code: string | null;
+  message: string;
+  param?: any;
+  type: string;
+}
+
+interface OllamaErrorResponse {
+  error: OllamaError;
+}
+
+const UNRESOLVED_MODEL_REGEXP = /model "([\w+,-_]+)" not found/;
+
+const CheckError = ({
+  defaultError,
+  error,
+  setError,
+}: {
+  defaultError: ReactNode;
+  error?: ChatMessageError;
+  setError: (error?: ChatMessageError) => void;
+}) => {
+  const errorBody: OllamaErrorResponse = (error as any)?.body;
+
+  const errorMessage = errorBody.error?.message;
+
+  // error of not pull the model
+  const unresolvedModel = errorMessage?.match(UNRESOLVED_MODEL_REGEXP)?.[1];
+
+  if (unresolvedModel) {
+    return (
+      <Container setError={setError}>
+        <InvalidModel model={unresolvedModel} />
+      </Container>
+    );
+  }
+
+  // error of not enable model or not set the CORS rules
+  if (errorMessage?.includes('Failed to fetch') || errorMessage?.includes('fetch failed')) {
+    return (
+      <Container setError={setError}>
+        <OllamaSetupGuide />
+      </Container>
+    );
+  }
+
+  return defaultError;
+};
+
+export default CheckError;

package/src/app/(main)/settings/provider/(detail)/ollama/Container.tsx

@@ -0,0 +1,57 @@
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { XIcon } from 'lucide-react';
+import { ReactNode, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  close: css`
+    position: absolute;
+    inset-block-start: 16px;
+    inset-inline-end: 16px;
+  `,
+  container: css`
+    position: relative;
+
+    width: min(50vw, 600px);
+    padding-inline: 40px;
+    border: 1px solid ${token.colorBorderBg};
+    border-radius: 8px;
+
+    background: ${token.colorBgContainer};
+
+    ${responsive.mobile} {
+      width: 100%;
+      padding-inline: 12px;
+    }
+  `,
+}));
+
+const Container = ({
+  setError,
+  children,
+}: {
+  children: ReactNode;
+  setError: (error?: any) => void;
+}) => {
+  const { styles } = useStyles();
+  const [show, setShow] = useState(true);
+
+  return (
+    show && (
+      <Flexbox className={styles.container}>
+        <ActionIcon
+          className={styles.close}
+          icon={XIcon}
+          onClick={() => {
+            setShow(false);
+            setError(undefined);
+          }}
+        />
+        {children}
+      </Flexbox>
+    )
+  );
+};
+
+export default Container;

package/src/app/(main)/settings/provider/(detail)/ollama/OllamaModelDownloader/index.tsx

@@ -0,0 +1,127 @@
+import { Ollama } from '@lobehub/icons';
+import { Button, Input, Progress } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import FormAction from '@/components/FormAction';
+import { ollamaService } from '@/services/ollama';
+import { formatSize } from '@/utils/format';
+
+import { useDownloadMonitor } from './useDownloadMonitor';
+
+interface OllamaModelDownloaderProps {
+  model: string;
+}
+
+const OllamaModelDownloader = memo<OllamaModelDownloaderProps>(({ model }) => {
+  const { t } = useTranslation(['modelProvider', 'error']);
+
+  const [modelToPull, setModelToPull] = useState(model);
+  const [completed, setCompleted] = useState(0);
+  const [total, setTotal] = useState(0);
+  const { remainingTime, downloadSpeed } = useDownloadMonitor(total, completed);
+  const percent = useMemo(() => {
+    return total ? Number(((completed / total) * 100).toFixed(1)) : 0;
+  }, [completed, total]);
+
+  const theme = useTheme();
+
+  const { mutate, isLoading: isDownloading } = useSWR(
+    [modelToPull],
+    async ([model]) => {
+      const generator = await ollamaService.pullModel(model);
+      for await (const progress of generator) {
+        if (progress.completed) {
+          setCompleted(progress.completed);
+          setTotal(progress.total);
+        }
+      }
+      return null;
+    },
+    {
+      onSuccess: () => {},
+      revalidateOnFocus: false,
+      revalidateOnMount: false,
+    },
+  );
+
+  return (
+    <Center gap={16} paddingBlock={32} style={{ width: '100%' }}>
+      <FormAction
+        avatar={<Ollama color={theme.colorPrimary} size={64} />}
+        description={isDownloading ? t('ollama.download.desc') : t('ollama.unlock.description')}
+        title={
+          isDownloading
+            ? t('ollama.download.title', { model: modelToPull })
+            : t('ollama.unlock.title')
+        }
+      >
+        {!isDownloading && (
+          <Input
+            onChange={(e) => {
+              setModelToPull(e.target.value);
+            }}
+            value={modelToPull}
+          />
+        )}
+      </FormAction>
+      {isDownloading && (
+        <Flexbox flex={1} gap={8} style={{ maxWidth: 300 }} width={'100%'}>
+          <Progress
+            percent={percent}
+            showInfo
+            strokeColor={theme.colorSuccess}
+            trailColor={theme.colorSuccessBg}
+          />
+          <Flexbox
+            distribution={'space-between'}
+            horizontal
+            style={{ color: theme.colorTextDescription, fontSize: 12 }}
+          >
+            <span>
+              {t('ollama.download.remainingTime')}: {remainingTime}
+            </span>
+            <span>
+              {t('ollama.download.speed')}: {downloadSpeed}
+            </span>
+          </Flexbox>
+        </Flexbox>
+      )}
+      <Flexbox gap={12} style={{ maxWidth: 300 }} width={'100%'}>
+        <Button
+          block
+          loading={isDownloading}
+          onClick={() => {
+            mutate();
+          }}
+          style={{ marginTop: 8 }}
+          type={'primary'}
+        >
+          {!isDownloading
+            ? t('ollama.unlock.confirm')
+            : // if total is 0, show starting, else show downloaded
+              !total
+              ? t('ollama.unlock.starting')
+              : t('ollama.unlock.downloaded', {
+                  completed: formatSize(completed, 2),
+                  total: formatSize(total, 2),
+                })}
+        </Button>
+        {isDownloading && (
+          <Button
+            onClick={() => {
+              ollamaService.abort();
+            }}
+          >
+            {t('ollama.unlock.cancel')}
+          </Button>
+        )}
+      </Flexbox>
+    </Center>
+  );
+});
+
+export default OllamaModelDownloader;