From 80409259c3b67a7911826f98bd6ed4b3f332d63e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Tue, 3 Mar 2026 16:36:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Bot=E5=8F=91=E5=B8=83=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=96=E9=93=BE=E8=81=8A=E5=A4=A9=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/SysTempTokenController.java        |    2 +
 .../listener/ChatStreamListener.java          |   45 +
 .../ai/service/impl/BotServiceImpl.java       |   11 +-
 .../app/src/locales/langs/en-US/bot.json      |   34 +-
 .../locales/langs/en-US/settingsConfig.json   |    4 +-
 .../app/src/locales/langs/zh-CN/bot.json      |   34 +-
 .../locales/langs/zh-CN/settingsConfig.json   |    4 +-
 .../app/src/router/routes/core.ts             |   22 +-
 .../views/ai/bots/pages/setting/config.vue    |  560 ++++++-
 .../src/views/ai/bots/pages/setting/index.vue |   13 +-
 .../src/views/config/settings/Settings.vue    |   22 +-
 .../app/src/views/publicChat/index.vue        | 1431 +++++++++++++++++
 12 files changed, 2152 insertions(+), 30 deletions(-)
 create mode 100644 easyflow-ui-admin/app/src/views/publicChat/index.vue

diff --git a/easyflow-api/easyflow-api-admin/src/main/java/tech/easyflow/admin/controller/system/SysTempTokenController.java b/easyflow-api/easyflow-api-admin/src/main/java/tech/easyflow/admin/controller/system/SysTempTokenController.java
index e96b1bc..3fc6975 100644
--- a/easyflow-api/easyflow-api-admin/src/main/java/tech/easyflow/admin/controller/system/SysTempTokenController.java
+++ b/easyflow-api/easyflow-api-admin/src/main/java/tech/easyflow/admin/controller/system/SysTempTokenController.java
@@ -24,6 +24,8 @@ public class SysTempTokenController {
         LoginAccount loginAccount = new LoginAccount();
         loginAccount.setId(BigInteger.valueOf(0));
         loginAccount.setLoginName("匿名用户");
+        loginAccount.setTenantId(BigInteger.ZERO);
+        loginAccount.setDeptId(BigInteger.ZERO);
         StpUtil.getSession().set(Constants.LOGIN_USER_KEY, loginAccount);
 
         return Result.ok("", tokenValue);
diff --git a/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/easyagents/listener/ChatStreamListener.java b/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/easyagents/listener/ChatStreamListener.java
index 87d6653..f419b8b 100644
--- a/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/easyagents/listener/ChatStreamListener.java
+++ b/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/easyagents/listener/ChatStreamListener.java
@@ -1,6 +1,7 @@
 package tech.easyflow.ai.easyagents.listener;
 
 import com.easyagents.core.message.AiMessage;
+import com.easyagents.core.message.ToolCall;
 import com.easyagents.core.message.ToolMessage;
 import com.easyagents.core.model.chat.ChatModel;
 import com.easyagents.core.model.chat.ChatOptions;
@@ -66,11 +67,18 @@ public class ChatStreamListener implements StreamResponseListener {
             if (aiMessage.isFinalDelta() && aiMessageResponse.hasToolCalls()) {
                 this.canStop = false; // 工具调用期间，禁止执行onStop
                 this.hasToolCall = true; // 标记已进入过工具调用
+                List<ToolCall> toolCalls = aiMessage.getToolCalls();
+                if (toolCalls != null) {
+                    for (ToolCall toolCall : toolCalls) {
+                        sendToolCallEnvelope(toolCall);
+                    }
+                }
                 aiMessage.setContent(null);
                 memoryPrompt.addMessage(aiMessage);
                 List<ToolMessage> toolMessages = aiMessageResponse.executeToolCallsAndGetToolMessages();
                 for (ToolMessage toolMessage : toolMessages) {
                     memoryPrompt.addMessage(toolMessage);
+                    sendToolResultEnvelope(toolMessage);
                 }
                 chatModel.chatStream(memoryPrompt, this, chatOptions);
             } else {
@@ -151,6 +159,43 @@ public class ChatStreamListener implements StreamResponseListener {
         }
     }
 
+    private void sendToolCallEnvelope(ToolCall toolCall) {
+        if (toolCall == null) {
+            return;
+        }
+        ChatEnvelope<Map<String, Object>> chatEnvelope = new ChatEnvelope<>();
+        chatEnvelope.setDomain(ChatDomain.TOOL);
+        chatEnvelope.setType(ChatType.TOOL_CALL);
+
+        Map<String, Object> payload = new LinkedHashMap<>();
+        payload.put("tool_call_id", toolCall.getId());
+        payload.put("name", toolCall.getName());
+        payload.put("arguments", toolCall.getArguments());
+        chatEnvelope.setPayload(payload);
+        boolean sent = sseEmitter.send(chatEnvelope);
+        if (!sent) {
+            throw new IllegalStateException("SSE emitter has already completed while sending tool call envelope");
+        }
+    }
+
+    private void sendToolResultEnvelope(ToolMessage toolMessage) {
+        if (toolMessage == null) {
+            return;
+        }
+        ChatEnvelope<Map<String, Object>> chatEnvelope = new ChatEnvelope<>();
+        chatEnvelope.setDomain(ChatDomain.TOOL);
+        chatEnvelope.setType(ChatType.TOOL_RESULT);
+
+        Map<String, Object> payload = new LinkedHashMap<>();
+        payload.put("tool_call_id", toolMessage.getToolCallId());
+        payload.put("result", toolMessage.getContent());
+        chatEnvelope.setPayload(payload);
+        boolean sent = sseEmitter.send(chatEnvelope);
+        if (!sent) {
+            throw new IllegalStateException("SSE emitter has already completed while sending tool result envelope");
+        }
+    }
+
     public void sendSystemError(ChatSseEmitter sseEmitter,
                                 String message,
                                 Throwable throwable) {
diff --git a/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/service/impl/BotServiceImpl.java b/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/service/impl/BotServiceImpl.java
index ba1c560..ff5cbb4 100644
--- a/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/service/impl/BotServiceImpl.java
+++ b/easyflow-modules/easyflow-module-ai/src/main/java/tech/easyflow/ai/service/impl/BotServiceImpl.java
@@ -148,7 +148,16 @@ public class BotServiceImpl extends ServiceImpl<BotMapper, Bot> implements BotSe
             return ChatSseUtil.sendSystemError(conversationId, "请配置大模型!");
         }
         boolean login = StpUtil.isLogin();
-        if (!login && !aiBot.isAnonymousEnabled()) {
+        boolean anonymousAccount = false;
+        if (login) {
+            try {
+                anonymousAccount = SaTokenUtil.getLoginAccount() != null
+                        && BigInteger.ZERO.equals(SaTokenUtil.getLoginAccount().getId());
+            } catch (Exception ignored) {
+                anonymousAccount = false;
+            }
+        }
+        if ((!login || anonymousAccount) && !aiBot.isAnonymousEnabled()) {
             return ChatSseUtil.sendSystemError(conversationId, "此聊天助手不支持匿名访问");
         }
         Map<String, Object> modelOptions = aiBot.getModelOptions();
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/bot.json b/easyflow-ui-admin/app/src/locales/langs/en-US/bot.json
index 36dae8b..b321963 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/bot.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/bot.json
@@ -12,8 +12,39 @@
   "enableDeepThinking": "EnableDeepThinking",
   "publish": "Publish",
   "postToWeChatOfficialAccount": "PostToWeChatOfficialAccount",
+  "publishExternalLink": "Publish External Chat Link",
   "configured": "Configured",
   "notConfigured": "NotConfigured",
+  "chatPublishBaseUrlMissing": "Publish base URL is not configured. Please set it in system settings first.",
+  "chatExternalLink": "Chat External Link",
+  "iframeEmbedCode": "Iframe Embed Code",
+  "copyLink": "Copy Link",
+  "copyIframeCode": "Copy Code",
+  "openPublicPage": "Open Page",
+  "allowAnonymousAccess": "Allow Anonymous Access",
+  "embedUsage": "Embed Notes",
+  "embedUsageTip1": "If embedding fails, check whether gateway/Nginx sets X-Frame-Options or strict Content-Security-Policy.",
+  "embedUsageTip2": "Embed only in trusted sites and combine with rate limiting.",
+  "publicPageBlocked": "Anonymous access is disabled for this bot",
+  "publicPageBlockedTip": "Enable anonymous access in publish settings before using external links.",
+  "publicChatTitle": "Public Chat Assistant",
+  "publicChatSubtitle": "Powered by EasyFlow",
+  "publicChatPlaceholder": "Type your question and press Enter to send",
+  "publicChatInputHint": "Shift + Enter for newline",
+  "publicChatSend": "Send",
+  "publicChatStop": "Stop",
+  "publicChatLoading": "Initializing chat environment...",
+  "publicChatThinking": "Thinking...",
+  "publicChatInitError": "Initialization failed, please try again later",
+  "publicChatAssistantReply": "Assistant Reply",
+  "publicChatToolCalling": "Calling tool",
+  "publicChatToolDone": "Tool completed",
+  "publicChatToolUnknown": "Unnamed tool",
+  "publicChatToolExpand": "Expand",
+  "publicChatToolCollapse": "Collapse",
+  "publicChatCopySuccess": "Copied",
+  "publicChatCopyFail": "Copy failed",
+  "basicInfo": "Basic Info",
   "placeholder": {
     "welcome": "Please enter welcome message",
     "prompt": "You are an AI assistant. Please provide clear and accurate answers based on the user's questions.",
@@ -23,5 +54,6 @@
   "aiOptimization": "AI Optimization",
   "weChatOfficialAccountConfiguration": "WeChat Official Account configuration",
   "aiOptimizedPrompts": "AI Optimized Prompts",
-  "chatAssistant": "Chat Assistant"
+  "chatAssistant": "Chat Assistant",
+  "publicChatStopped": "Generation stopped"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/settingsConfig.json b/easyflow-ui-admin/app/src/locales/langs/en-US/settingsConfig.json
index 171e521..ebf6ea6 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/settingsConfig.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/settingsConfig.json
@@ -6,5 +6,7 @@
   "basic": "BasicInformation",
   "updatePwd": "UpdatePassword",
   "systemAIFunctionSettings": "System AI Function Settings",
-  "note": "Note: This config only applies to system AI features, not [Chat Assistant]."
+  "note": "Note: This config only applies to system AI features, not [Chat Assistant].",
+  "chatPublishBaseUrl": "Chat Publish Base URL",
+  "chatPublishBaseUrlPlaceholder": "For example: https://your-admin-domain"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/bot.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/bot.json
index 58e2bb5..0866280 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/bot.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/bot.json
@@ -12,8 +12,39 @@
   "enableDeepThinking": "是否启用深度思考",
   "publish": "发布",
   "postToWeChatOfficialAccount": "发布到微信公众号",
+  "publishExternalLink": "发布外链聊天页",
   "configured": "已配置",
   "notConfigured": "未配置",
+  "chatPublishBaseUrlMissing": "未配置发布域名，请先到系统设置中配置",
+  "chatExternalLink": "聊天外链",
+  "iframeEmbedCode": "iframe 嵌入代码",
+  "copyLink": "复制链接",
+  "copyIframeCode": "复制代码",
+  "openPublicPage": "打开页面",
+  "allowAnonymousAccess": "允许匿名访问",
+  "embedUsage": "嵌入说明",
+  "embedUsageTip1": "若无法嵌入，请检查网关/Nginx 是否设置 X-Frame-Options 或严格 Content-Security-Policy。",
+  "embedUsageTip2": "建议仅在可信站点嵌入，并结合限流策略使用。",
+  "publicPageBlocked": "该助手未开放匿名访问",
+  "publicPageBlockedTip": "请在发布设置中开启“允许匿名访问”后再通过外链访问。",
+  "publicChatTitle": "公开聊天助手",
+  "publicChatSubtitle": "由 EasyFlow 驱动",
+  "publicChatPlaceholder": "输入你的问题，按 Enter 发送",
+  "publicChatInputHint": "Shift + Enter 换行",
+  "publicChatSend": "发送",
+  "publicChatStop": "停止",
+  "publicChatLoading": "正在初始化聊天环境...",
+  "publicChatThinking": "思考中...",
+  "publicChatInitError": "初始化失败，请稍后重试",
+  "publicChatAssistantReply": "助手回复",
+  "publicChatToolCalling": "工具调用中",
+  "publicChatToolDone": "工具已返回",
+  "publicChatToolUnknown": "未命名工具",
+  "publicChatToolExpand": "展开",
+  "publicChatToolCollapse": "收起",
+  "publicChatCopySuccess": "复制成功",
+  "publicChatCopyFail": "复制失败",
+  "basicInfo": "基础信息",
   "placeholder": {
     "welcome": "请输入欢迎语",
     "prompt": "你是一个AI助手，请根据用户的问题给出清晰、准确的回答。",
@@ -23,5 +54,6 @@
   "aiOptimization": "AI优化",
   "weChatOfficialAccountConfiguration": "微信公众号配置",
   "aiOptimizedPrompts": "AI优化提示词",
-  "chatAssistant": "聊天助手"
+  "chatAssistant": "聊天助手",
+  "publicChatStopped": "已停止输出"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/settingsConfig.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/settingsConfig.json
index b9ec6c4..a75075b 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/settingsConfig.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/settingsConfig.json
@@ -6,5 +6,7 @@
   "basic": "基本设置",
   "updatePwd": "修改密码",
   "systemAIFunctionSettings": "系统 AI 功能设置",
-  "note": "注意：此项配置，仅用于系统的 AI 功能，而非【聊天助手】。"
+  "note": "注意：此项配置，仅用于系统的 AI 功能，而非【聊天助手】。",
+  "chatPublishBaseUrl": "聊天外链发布域名",
+  "chatPublishBaseUrlPlaceholder": "例如：https://your-admin-domain"
 }
diff --git a/easyflow-ui-admin/app/src/router/routes/core.ts b/easyflow-ui-admin/app/src/router/routes/core.ts
index ad5bde9..549dda9 100644
--- a/easyflow-ui-admin/app/src/router/routes/core.ts
+++ b/easyflow-ui-admin/app/src/router/routes/core.ts
@@ -1,9 +1,9 @@
-import type { RouteRecordRaw } from 'vue-router';
+import type {RouteRecordRaw} from 'vue-router';
 
-import { LOGIN_PATH } from '@easyflow/constants';
-import { preferences } from '@easyflow/preferences';
+import {LOGIN_PATH} from '@easyflow/constants';
+import {preferences} from '@easyflow/preferences';
 
-import { $t } from '#/locales';
+import {$t} from '#/locales';
 
 const BasicLayout = () => import('#/layouts/basic.vue');
 const AuthPageLayout = () => import('#/layouts/auth.vue');
@@ -33,6 +33,20 @@ const coreRoutes: RouteRecordRaw[] = [
     name: 'OAuth',
     path: '/oauth',
   },
+  {
+    name: 'PublicBotChat',
+    path: '/embed/chat/:botId',
+    component: () => import('#/views/publicChat/index.vue'),
+    meta: {
+      title: 'PublicChat',
+      noBasicLayout: true,
+      hideInMenu: true,
+      hideInTab: true,
+      hideInBreadcrumb: true,
+      ignoreAccess: true,
+      loaded: true,
+    },
+  },
   /**
    * 根路由
    * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
diff --git a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue
index 6e87a5d..7fc2611 100644
--- a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue
+++ b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { AiLlm, BotInfo } from '@easyflow/types';
+import type {AiLlm, BotInfo} from '@easyflow/types';
 
-import { onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import {computed, onMounted, ref, watch} from 'vue';
+import {useRoute} from 'vue-router';
 
-import { $t } from '@easyflow/locales';
-import { useBotStore } from '@easyflow/stores';
+import {$t} from '@easyflow/locales';
+import {useBotStore} from '@easyflow/stores';
 
-import { Delete, Plus, Setting } from '@element-plus/icons-vue';
-import { useDebounceFn } from '@vueuse/core';
+import {CopyDocument, Delete, InfoFilled, Link, Plus, Setting} from '@element-plus/icons-vue';
+import {useDebounceFn} from '@vueuse/core';
 import {
+  ElAlert,
   ElButton,
   ElCol,
   ElCollapse,
@@ -20,22 +21,27 @@ import {
   ElMessage,
   ElRow,
   ElSelect,
+  ElSkeleton,
   ElSlider,
   ElSwitch,
+  ElTooltip,
 } from 'element-plus';
-import { tryit } from 'radash';
+import {tryit} from 'radash';
 
 import {
   getPerQuestions,
+  updateBotApi,
   updateBotOptions,
   updateLlmId,
   updateLlmOptions,
 } from '#/api';
-import { api } from '#/api/request';
+import {api} from '#/api/request';
 import ProblemPresupposition from '#/components/chat/ProblemPresupposition.vue';
 import PublishWxOfficalAccount from '#/components/chat/PublishWxOfficalAccount.vue';
 import CollapseViewItem from '#/components/collapseViewItem/CollapseViewItem.vue';
 import CommonSelectDataModal from '#/components/commonSelectModal/CommonSelectDataModal.vue';
+import DictSelect from '#/components/dict/DictSelect.vue';
+import UploadAvatar from '#/components/upload/UploadAvatar.vue';
 
 interface SelectedMcpTool {
   name: string;
@@ -60,6 +66,89 @@ const llmConfig = ref({
 const dialogueSettings = ref({
   welcomeMessage: '',
   enableDeepThinking: false,
+  anonymousEnabled: false,
+});
+const publishBaseUrl = ref('');
+const routerHistoryMode = import.meta.env.VITE_ROUTER_HISTORY;
+const normalizePublishBaseUrl = (value: string) => {
+  const raw = value.trim();
+  if (!raw) {
+    return '';
+  }
+  if (/^https?:\/\//i.test(raw)) {
+    return raw.replace(/\/+$/, '');
+  }
+  if (raw.startsWith('//')) {
+    return `${window.location.protocol}${raw}`.replace(/\/+$/, '');
+  }
+  // 支持仅填写 localhost 这类主机名，自动补协议和当前端口，避免被当作相对路径。
+  const firstSegment = raw.split('/')[0] || '';
+  const hasPort = /:\d+$/.test(firstSegment);
+  let hostAndPath = raw;
+  if (
+    !hasPort &&
+    firstSegment === window.location.hostname &&
+    window.location.port
+  ) {
+    hostAndPath = `${firstSegment}:${window.location.port}${raw.slice(firstSegment.length)}`;
+  }
+  return `${window.location.protocol}//${hostAndPath}`.replace(/\/+$/, '');
+};
+const hasPublishBaseUrl = computed(
+  () => publishBaseUrl.value.trim().length > 0,
+);
+const publicChatPath = computed(() =>
+  routerHistoryMode === 'hash'
+    ? `/#/embed/chat/${botId.value}`
+    : `/embed/chat/${botId.value}`,
+);
+const publicChatUrl = computed(() => {
+  if (!hasPublishBaseUrl.value) {
+    return '';
+  }
+  const base = normalizePublishBaseUrl(publishBaseUrl.value);
+  return `${base}${publicChatPath.value}`;
+});
+const publicChatEmbedUrl = computed(() => {
+  if (!publicChatUrl.value) {
+    return '';
+  }
+  return `${publicChatUrl.value}?embed=1`;
+});
+const iframeCode = computed(() => {
+  if (!publicChatEmbedUrl.value) {
+    return '';
+  }
+  return `<iframe
+  src="${publicChatEmbedUrl.value}"
+  width="100%"
+  height="720"
+  style="border:0;border-radius:12px;overflow:hidden"
+  loading="lazy"
+  referrerpolicy="no-referrer-when-downgrade"
+></iframe>`;
+});
+const escapeHtml = (value: string) =>
+  value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+const iframeCodeHighlighted = computed(() => {
+  if (!iframeCode.value) {
+    return '';
+  }
+  const escaped = escapeHtml(iframeCode.value);
+  return escaped
+    .replace(
+      /(&lt;\/?)([a-zA-Z][\w-]*)/g,
+      '$1<span class="hljs-name">$2</span>',
+    )
+    .replace(
+      /([:@a-zA-Z_][\w:-]*)=(&quot;.*?&quot;)/g,
+      '<span class="hljs-attr">$1</span>=<span class="hljs-string">$2</span>',
+    );
 });
 watch(
   props,
@@ -135,6 +224,20 @@ const getAiBotWorkflowList = async () => {
     });
 };
 const botInfo = ref<BotInfo>();
+const basicInfoForm = ref({
+  title: '',
+  alias: '',
+  categoryId: '',
+});
+const updatingBotIcon = ref(false);
+const updatingBasicInfo = ref(false);
+const syncingBasicInfoForm = ref(false);
+const getPublishBaseUrl = async () => {
+  const [, res] = await tryit(api.get)('/api/v1/sysOption/list?keys=chat_publish_base_url');
+  if (res?.errorCode === 0) {
+    publishBaseUrl.value = (res.data?.chat_publish_base_url || '').trim();
+  }
+};
 const getBotDetail = async () => {
   api
     .get('/api/v1/bot/detail', {
@@ -146,11 +249,21 @@ const getBotDetail = async () => {
       if (res.errorCode === 0) {
         botInfo.value = res.data;
         if (res.data.options) {
-          dialogueSettings.value = res.data.options;
+          dialogueSettings.value = {
+            ...dialogueSettings.value,
+            ...res.data.options,
+          };
         }
         if (res.data.options?.presetQuestions) {
           botStore.setPresetQuestions(res.data?.options?.presetQuestions);
         }
+        syncingBasicInfoForm.value = true;
+        basicInfoForm.value = {
+          title: res.data.title || '',
+          alias: res.data.alias || '',
+          categoryId: res.data.categoryId || '',
+        };
+        syncingBasicInfoForm.value = false;
       }
     });
 };
@@ -163,6 +276,7 @@ const getLlmListData = async () => {
   });
 };
 onMounted(async () => {
+  getPublishBaseUrl();
   getAiBotPluginToolList();
   getAiBotKnowledgeList();
   getAiBotWorkflowList();
@@ -171,6 +285,33 @@ onMounted(async () => {
   getLlmListData();
 });
 
+const handleAnonymousAccessChange = (
+  value: boolean | number | string,
+) => {
+  handleDialogOptionsStrChange('anonymousEnabled', value);
+};
+
+const handleCopyValue = async (value: string, successMessage?: string) => {
+  if (!value) {
+    ElMessage.warning($t('bot.chatPublishBaseUrlMissing'));
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(value);
+    ElMessage.success(successMessage || $t('bot.publicChatCopySuccess'));
+  } catch {
+    ElMessage.error($t('bot.publicChatCopyFail'));
+  }
+};
+
+const openPublicPage = () => {
+  if (!publicChatUrl.value) {
+    ElMessage.warning($t('bot.chatPublishBaseUrlMissing'));
+    return;
+  }
+  window.open(publicChatUrl.value, '_blank', 'noopener,noreferrer');
+};
+
 const handleLlmChange = async (value: string) => {
   if (!props.bot) return;
 
@@ -440,10 +581,152 @@ const formatSelectedMcpData = () => {
 
   return formattedData;
 };
+
+const persistBotBasicInfo = async (
+  patch: Partial<Pick<BotInfo, 'alias' | 'categoryId' | 'icon' | 'title'>>,
+) => {
+  if (!botInfo.value || !props.hasSavePermission) {
+    return false;
+  }
+  const snapshot = { ...botInfo.value };
+  const next = {
+    ...snapshot,
+    ...patch,
+  };
+
+  botInfo.value = next;
+  const [, res] = await tryit(updateBotApi)({
+    id: String(next.id),
+    icon: next.icon || '',
+    title: next.title || '',
+    alias: next.alias || '',
+    description: next.description || '',
+    categoryId: next.categoryId,
+    status: next.status,
+  });
+
+  if (res?.errorCode === 0) {
+    return true;
+  }
+
+  botInfo.value = snapshot;
+  ElMessage.error(res?.message || $t('message.saveFailMessage'));
+  return false;
+};
+
+const handleBotIconUpdate = async (iconPath: string) => {
+  if (!iconPath || !botInfo.value) {
+    return;
+  }
+  if (!props.hasSavePermission) {
+    ElMessage.warning($t('bot.noPermission'));
+    return;
+  }
+  if (updatingBotIcon.value) {
+    return;
+  }
+  updatingBotIcon.value = true;
+  const ok = await persistBotBasicInfo({ icon: iconPath });
+  updatingBotIcon.value = false;
+  if (ok) {
+    ElMessage.success($t('message.updateOkMessage'));
+  }
+};
+
+const handleBasicInfoChange = async (
+  key: 'alias' | 'categoryId' | 'title',
+  value: any,
+) => {
+  if (!botInfo.value || !props.hasSavePermission || syncingBasicInfoForm.value) {
+    return;
+  }
+  if (updatingBasicInfo.value) {
+    return;
+  }
+
+  const normalizedValue = key === 'categoryId' ? value : String(value || '').trim();
+  if ((key === 'title' || key === 'alias') && !normalizedValue) {
+    ElMessage.warning($t('message.required'));
+    basicInfoForm.value[key] = botInfo.value[key] as string;
+    return;
+  }
+
+  if (botInfo.value[key] === normalizedValue) {
+    basicInfoForm.value[key] = normalizedValue as any;
+    return;
+  }
+
+  updatingBasicInfo.value = true;
+  const ok = await persistBotBasicInfo({
+    [key]: normalizedValue,
+  } as Partial<Pick<BotInfo, 'alias' | 'categoryId' | 'title'>>);
+  updatingBasicInfo.value = false;
+
+  if (ok) {
+    ElMessage.success($t('message.updateOkMessage'));
+    basicInfoForm.value[key] = normalizedValue as any;
+  } else {
+    basicInfoForm.value[key] = botInfo.value[key] as any;
+  }
+};
 </script>
 
 <template>
   <div class="config-container flex flex-col gap-3">
+    <!-- 基础信息 -->
+    <div
+      class="bg-background dark:border-border flex flex-col gap-3 rounded-lg p-3 dark:border"
+    >
+      <h1 class="text-base font-medium">{{ $t('bot.basicInfo') }}</h1>
+      <div class="bot-basic-info-container">
+        <div class="bot-basic-info-layout">
+          <div class="bot-avatar-panel">
+            <span class="bot-avatar-label">{{ $t('common.avatar') }}</span>
+            <div
+              :class="[
+                'bot-avatar-upload-wrap',
+                (!hasSavePermission || updatingBotIcon) ? 'is-disabled' : '',
+              ]"
+            >
+              <UploadAvatar
+                v-if="botInfo"
+                v-model="botInfo.icon"
+                @success="handleBotIconUpdate"
+              />
+              <ElSkeleton v-else animated :rows="1" style="width: 100px" />
+            </div>
+          </div>
+          <div class="bot-basic-form-panel">
+            <div class="bot-basic-form-item">
+              <span class="bot-basic-form-label">{{ $t('aiWorkflow.title') }}</span>
+              <ElInput
+                v-model="basicInfoForm.title"
+                :disabled="!hasSavePermission || updatingBasicInfo"
+                @change="(value) => handleBasicInfoChange('title', value)"
+              />
+            </div>
+            <div class="bot-basic-form-item">
+              <span class="bot-basic-form-label">{{ $t('plugin.alias') }}</span>
+              <ElInput
+                v-model="basicInfoForm.alias"
+                :disabled="!hasSavePermission || updatingBasicInfo"
+                @change="(value) => handleBasicInfoChange('alias', value)"
+              />
+            </div>
+            <div class="bot-basic-form-item">
+              <span class="bot-basic-form-label">{{ $t('aiWorkflow.categoryId') }}</span>
+              <DictSelect
+                v-model="basicInfoForm.categoryId"
+                dict-code="aiBotCategory"
+                :disabled="!hasSavePermission || updatingBasicInfo"
+                @change="(value: any) => handleBasicInfoChange('categoryId', value)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 大模型 -->
     <div
       class="bg-background dark:border-border flex flex-col gap-3 rounded-lg p-3 dark:border"
@@ -822,6 +1105,87 @@ const formatSelectedMcpData = () => {
               </div>
             </div>
           </ElCollapseItem>
+          <ElCollapseItem :title="$t('bot.publishExternalLink')">
+            <div class="publish-external-container">
+              <div class="publish-external-top">
+                <span>{{ $t('bot.allowAnonymousAccess') }}</span>
+                <ElSwitch
+                  v-model="dialogueSettings.anonymousEnabled"
+                  @change="handleAnonymousAccessChange"
+                />
+              </div>
+              <div v-if="!hasPublishBaseUrl" class="publish-base-url-warning">
+                <ElAlert
+                  :title="$t('bot.chatPublishBaseUrlMissing')"
+                  type="warning"
+                  :closable="false"
+                />
+              </div>
+              <div class="publish-external-item">
+                <label class="publish-external-label">
+                  {{ $t('bot.chatExternalLink') }}
+                </label>
+                <ElInput :model-value="publicChatUrl" readonly />
+                <div class="publish-external-actions">
+                  <ElButton
+                    size="small"
+                    type="primary"
+                    plain
+                    @click="handleCopyValue(publicChatUrl)"
+                  >
+                    <ElIcon class="mr-1">
+                      <CopyDocument />
+                    </ElIcon>
+                    {{ $t('bot.copyLink') }}
+                  </ElButton>
+                  <ElButton
+                    size="small"
+                    type="primary"
+                    @click="openPublicPage"
+                  >
+                    <ElIcon class="mr-1">
+                      <Link />
+                    </ElIcon>
+                    {{ $t('bot.openPublicPage') }}
+                  </ElButton>
+                </div>
+              </div>
+              <div class="publish-external-item">
+                <label class="publish-external-label flex items-center gap-1">
+                  <span>{{ $t('bot.iframeEmbedCode') }}</span>
+                  <ElTooltip
+                    effect="dark"
+                    placement="top"
+                  >
+                    <template #content>
+                      <div>{{ $t('bot.embedUsageTip1') }}</div>
+                      <div class="mt-1">{{ $t('bot.embedUsageTip2') }}</div>
+                    </template>
+                    <ElIcon class="text-gray-400 hover:text-gray-600 cursor-pointer transition-colors"><InfoFilled /></ElIcon>
+                  </ElTooltip>
+                </label>
+                <div class="publish-external-code-preview">
+                  <div class="publish-external-code-topbar">HTML</div>
+                  <pre class="publish-external-code-block"><code
+                    class="hljs language-xml"
+                    v-html="iframeCodeHighlighted"
+                  ></code></pre>
+                </div>
+                <div class="publish-external-actions">
+                  <ElButton
+                    size="small"
+                    plain
+                    @click="handleCopyValue(iframeCode)"
+                  >
+                    <ElIcon class="mr-1">
+                      <CopyDocument />
+                    </ElIcon>
+                    {{ $t('bot.copyIframeCode') }}
+                  </ElButton>
+                </div>
+              </div>
+            </div>
+          </ElCollapseItem>
         </ElCollapse>
       </div>
     </div>
@@ -1002,6 +1366,107 @@ const formatSelectedMcpData = () => {
   justify-content: flex-end;
 }
 
+.publish-external-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background-color: var(--bot-collapse-itme-back);
+}
+
+.publish-external-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: var(--el-bg-color);
+  border-radius: 8px;
+}
+
+.publish-base-url-warning {
+  margin-bottom: 2px;
+}
+
+.publish-external-item {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--el-bg-color);
+  border-radius: 8px;
+}
+
+.publish-external-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-regular);
+}
+
+.publish-external-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.publish-external-alert {
+  margin-top: 8px;
+}
+
+.publish-external-code-preview {
+  max-width: 100%;
+  overflow: hidden;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 10px;
+}
+
+.publish-external-code-topbar {
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #93c5fd;
+  background: #111b31;
+  border-bottom: 1px solid #1f2d49;
+}
+
+.publish-external-code-block {
+  width: 100%;
+  max-width: 100%;
+  max-height: 180px;
+  margin: 0;
+  overflow-x: auto;
+  overflow-y: auto;
+  padding: 10px 12px;
+}
+
+.publish-external-code-block code {
+  display: block;
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #d8e1f0;
+}
+
+.publish-external-code-block code .hljs-tag,
+.publish-external-code-block code .hljs-name,
+.publish-external-code-block code .hljs-keyword {
+  color: #93c5fd;
+}
+
+.publish-external-code-block code .hljs-attr {
+  color: #fcd34d;
+}
+
+.publish-external-code-block code .hljs-string {
+  color: #86efac;
+}
+
 :deep(.el-collapse) {
   box-sizing: border-box;
   height: 100%;
@@ -1053,4 +1518,79 @@ const formatSelectedMcpData = () => {
   padding: 10px;
   background-color: var(--bot-collapse-itme-back);
 }
+
+.bot-basic-info-container {
+  padding: 16px 20px;
+  background-color: var(--bot-collapse-itme-back);
+  border-radius: 8px;
+}
+
+.bot-basic-info-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: stretch;
+}
+
+.bot-avatar-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.bot-basic-form-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.bot-basic-form-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.bot-avatar-label,
+.bot-basic-form-label {
+  flex: 0 0 60px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+  text-align: left;
+  padding-right: 16px;
+}
+
+.bot-avatar-upload-wrap {
+  flex: 1;
+}
+
+.bot-basic-form-item > *:not(.bot-basic-form-label) {
+  flex: 1;
+}
+
+.bot-avatar-upload-wrap.is-disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.bot-avatar-upload-wrap :deep(.avatar-uploader .avatar) {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.bot-avatar-upload-wrap :deep(.el-icon.avatar-uploader-icon) {
+  width: 50px;
+  height: 50px;
+  font-size: 18px;
+  border-radius: 50%;
+}
+
+.bot-avatar-upload-wrap :deep(.avatar-uploader .el-upload) {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue
index cca6f92..21617e4 100644
--- a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue
+++ b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { BotInfo } from '@easyflow/types';
+import type {BotInfo} from '@easyflow/types';
 
-import { computed, onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import {computed, onMounted, ref} from 'vue';
+import {useRoute} from 'vue-router';
 
-import { tryit } from 'radash';
+import {tryit} from 'radash';
 
-import { getBotDetails } from '#/api';
-import { hasPermission } from '#/api/common/hasPermission';
+import {getBotDetails} from '#/api';
+import {hasPermission} from '#/api/common/hasPermission';
 
 import Config from './config.vue';
 import Preview from './preview.vue';
@@ -62,5 +62,6 @@ const fetchBotDetail = async (id: string) => {
 .row-item {
   height: 100%;
   flex: 1;
+  min-width: 0;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/config/settings/Settings.vue b/easyflow-ui-admin/app/src/views/config/settings/Settings.vue
index a88afd8..2b67804 100644
--- a/easyflow-ui-admin/app/src/views/config/settings/Settings.vue
+++ b/easyflow-ui-admin/app/src/views/config/settings/Settings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import {onMounted, ref} from 'vue';
 
-import { $t } from '@easyflow/locales';
+import {$t} from '@easyflow/locales';
 
 import {
   ElAlert,
@@ -14,7 +14,7 @@ import {
   ElSelect,
 } from 'element-plus';
 
-import { api } from '#/api/request.js';
+import {api} from '#/api/request.js';
 import providerList from '#/views/ai/model/modelUtils/providerList.json';
 
 interface ProviderOptionExtra {
@@ -45,6 +45,7 @@ interface SettingsEntity {
   chatgpt_chatPath: string;
   chatgpt_endpoint: string;
   chatgpt_model_name: string;
+  chat_publish_base_url: string;
   model_of_chat: string;
 }
 
@@ -64,11 +65,14 @@ function getBrands() {
 function getOptions() {
   api
     .get(
-      '/api/v1/sysOption/list?keys=model_of_chat&keys=chatgpt_endpoint&keys=chatgpt_chatPath&keys=chatgpt_api_key&keys=chatgpt_model_name',
+      '/api/v1/sysOption/list?keys=model_of_chat&keys=chatgpt_endpoint&keys=chatgpt_chatPath&keys=chatgpt_api_key&keys=chatgpt_model_name&keys=chat_publish_base_url',
     )
     .then((res) => {
       if (res.errorCode === 0) {
-        entity.value = res.data;
+        entity.value = {
+          ...entity.value,
+          ...res.data,
+        };
       }
     });
 }
@@ -83,6 +87,7 @@ const entity = ref<SettingsEntity>({
   chatgpt_chatPath: '',
   chatgpt_endpoint: '',
   chatgpt_model_name: '',
+  chat_publish_base_url: '',
 });
 
 function formatLlmList(data: ModelProvider[]): LlmOption[] {
@@ -150,6 +155,13 @@ function handleSave() {
         <ElFormItem label="ApiKey">
           <ElInput v-model="entity.chatgpt_api_key" clearable />
         </ElFormItem>
+        <ElFormItem :label="$t('settingsConfig.chatPublishBaseUrl')">
+          <ElInput
+            v-model="entity.chat_publish_base_url"
+            clearable
+            :placeholder="$t('settingsConfig.chatPublishBaseUrlPlaceholder')"
+          />
+        </ElFormItem>
       </ElForm>
       <div class="settings-button-container">
         <ElButton type="primary" @click="handleSave">
diff --git a/easyflow-ui-admin/app/src/views/publicChat/index.vue b/easyflow-ui-admin/app/src/views/publicChat/index.vue
new file mode 100644
index 0000000..c6d2ea7
--- /dev/null
+++ b/easyflow-ui-admin/app/src/views/publicChat/index.vue
@@ -0,0 +1,1431 @@
+<script setup lang="ts">
+import type {BotInfo} from '@easyflow/types';
+import type {ServerSentEventMessage} from 'fetch-event-stream';
+
+import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import {useRoute} from 'vue-router';
+
+import {IconifyIcon} from '@easyflow/icons';
+import {$t} from '@easyflow/locales';
+import {useAccessStore} from '@easyflow/stores';
+import {uuid} from '@easyflow/utils';
+import {useTitle} from '@vueuse/core';
+
+import {ElAvatar, ElButton, ElInput, ElSkeleton} from 'element-plus';
+
+import {api, sseClient} from '#/api/request';
+import defaultBotAvatar from '#/assets/ai/bot/defaultBotAvatar.png';
+
+type MessageRole = 'assistant' | 'user';
+type ToolStatus = 'TOOL_CALL' | 'TOOL_RESULT';
+
+interface ToolTraceItem {
+  id: string;
+  name: string;
+  status: ToolStatus;
+  arguments?: string;
+  result?: string;
+}
+
+interface AssistantTextSegment {
+  id: string;
+  type: 'text';
+  content: string;
+}
+
+interface AssistantToolSegment {
+  id: string;
+  type: 'tool';
+  toolId: string;
+}
+
+type AssistantSegment = AssistantTextSegment | AssistantToolSegment;
+
+interface BubbleMessage {
+  id: string;
+  role: MessageRole;
+  content: string;
+  createdAt: number;
+  loading?: boolean;
+  toolCalls?: ToolTraceItem[];
+  segments?: AssistantSegment[];
+}
+
+interface HistoryMessage {
+  content: string;
+  role: string;
+}
+
+const route = useRoute();
+const accessStore = useAccessStore();
+const pageTitle = useTitle();
+
+const botInfo = ref<BotInfo | null>(null);
+const conversationId = ref<string>('');
+const initializing = ref(true);
+const blocked = ref(false);
+const initError = ref('');
+const sending = ref(false);
+const userStoppedStreaming = ref(false);
+const isComposing = ref(false);
+const senderValue = ref('');
+const messages = ref<BubbleMessage[]>([]);
+const historyMessages = ref<HistoryMessage[]>([]);
+const messageContainerRef = ref<HTMLElement | null>(null);
+const dockRef = ref<HTMLElement | null>(null);
+const shouldAutoScroll = ref(true);
+const dockHeight = ref(170);
+const collapsedToolIds = ref<Set<string>>(new Set());
+const botId = computed(() => String(route.params.botId || ''));
+const isEmbedMode = computed(() => String(route.query.embed || '') === '1');
+const presetQuestions = computed(() =>
+  (botInfo.value?.options?.presetQuestions || []).filter(
+    (item: any) => typeof item?.description === 'string' && item.description.trim() !== '',
+  ),
+);
+const messageContainerStyle = computed(() => ({
+  '--public-chat-dock-space': `${Math.max(dockHeight.value + 14, 132)}px`,
+}));
+let dockResizeObserver: null | ResizeObserver = null;
+
+const SCROLL_FOLLOW_THRESHOLD = 48;
+const setPageTitle = () => {
+  const botTitle = String(botInfo.value?.title || '').trim();
+  pageTitle.value = botTitle || $t('bot.publicChatTitle');
+};
+
+const isAtBottom = () => {
+  if (!messageContainerRef.value) return true;
+  const { scrollTop, scrollHeight, clientHeight } = messageContainerRef.value;
+  return scrollHeight - (scrollTop + clientHeight) <= SCROLL_FOLLOW_THRESHOLD;
+};
+
+const onMessageContainerScroll = () => {
+  shouldAutoScroll.value = isAtBottom();
+};
+
+const updateDockHeight = () => {
+  dockHeight.value = dockRef.value?.offsetHeight || 0;
+};
+
+const scrollToBottom = (force = false) => {
+  nextTick(() => {
+    if (!messageContainerRef.value) return;
+    if (!force && !shouldAutoScroll.value) return;
+    messageContainerRef.value.scrollTop = messageContainerRef.value.scrollHeight;
+  });
+};
+
+const resetConversationState = () => {
+  botInfo.value = null;
+  conversationId.value = '';
+  sending.value = false;
+  senderValue.value = '';
+  messages.value = [];
+  historyMessages.value = [];
+  blocked.value = false;
+  initError.value = '';
+  shouldAutoScroll.value = true;
+  collapsedToolIds.value = new Set();
+};
+
+const appendMessage = (role: MessageRole, content = '', loading = false) => {
+  const item: BubbleMessage = {
+    id: uuid(),
+    role,
+    content,
+    createdAt: Date.now(),
+    loading,
+  };
+  if (role === 'assistant' && content.trim()) {
+    item.segments = [
+      {
+        id: uuid(),
+        type: 'text',
+        content,
+      },
+    ];
+  }
+  messages.value.push(item);
+  scrollToBottom(true);
+};
+
+const updateLastAssistantMessage = (patch: Partial<BubbleMessage>) => {
+  const lastIndex = messages.value.length - 1;
+  if (lastIndex < 0) return;
+  const last = messages.value[lastIndex];
+  if (!last || last.role !== 'assistant') return;
+  messages.value[lastIndex] = { ...last, ...patch };
+  scrollToBottom();
+};
+
+const normalizeEventKey = (value: any) => String(value || '').toUpperCase();
+const safeJsonParse = (value: string) => {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
+const safeJsonParseLoose = (value: string) => {
+  const parsed = safeJsonParse(value);
+  if (parsed) {
+    return parsed;
+  }
+  const firstBrace = value.indexOf('{');
+  const lastBrace = value.lastIndexOf('}');
+  if (firstBrace < 0 || lastBrace <= firstBrace) {
+    return null;
+  }
+  return safeJsonParse(value.slice(firstBrace, lastBrace + 1));
+};
+
+const normalizeToolPayloadValue = (value: any) => {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'string') return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const getLastAssistantMessage = () => {
+  const last = messages.value[messages.value.length - 1];
+  if (!last || last.role !== 'assistant') {
+    return null;
+  }
+  return last;
+};
+
+const appendAssistantTextDelta = (delta: string) => {
+  if (!delta) return;
+  const last = getLastAssistantMessage();
+  if (!last) return;
+  const segments = [...(last.segments || [])];
+  const tail = segments[segments.length - 1];
+  if (tail && tail.type === 'text') {
+    segments[segments.length - 1] = {
+      ...tail,
+      content: `${tail.content}${delta}`,
+    };
+  } else {
+    segments.push({
+      id: uuid(),
+      type: 'text',
+      content: delta,
+    });
+  }
+  updateLastAssistantMessage({
+    content: `${last.content}${delta}`,
+    segments,
+    loading: true,
+  });
+};
+
+const getToolById = (message: BubbleMessage, toolId: string) =>
+  (message.toolCalls || []).find((item) => item.id === toolId);
+
+const getRenderableSegments = (message: BubbleMessage) => {
+  if (message.role !== 'assistant') {
+    return [];
+  }
+  const segments = [...(message.segments || [])];
+  const hasTextSegment = segments.some(
+    (segment) => segment.type === 'text' && segment.content.trim() !== '',
+  );
+  if (!hasTextSegment && message.content.trim()) {
+    segments.push({
+      id: `${message.id}-fallback-text`,
+      type: 'text',
+      content: message.content,
+    });
+  }
+  return segments;
+};
+
+const hasAssistantRenderableContent = (message: BubbleMessage) => {
+  const segments = getRenderableSegments(message);
+  return segments.some((segment) => {
+    if (segment.type === 'text') {
+      return segment.content.trim() !== '';
+    }
+    return Boolean(getToolById(message, segment.toolId));
+  });
+};
+
+const upsertToolTrace = (patch: Partial<ToolTraceItem> & { id?: string }) => {
+  const last = getLastAssistantMessage();
+  if (!last) {
+    return;
+  }
+  const nextToolCalls = [...(last.toolCalls || [])];
+  let id = String(patch.id || '');
+  if (!id && patch.status === 'TOOL_RESULT') {
+    const pending = [...nextToolCalls].reverse().find((item) => item.status !== 'TOOL_RESULT');
+    if (pending) {
+      id = pending.id;
+    }
+  }
+  if (!id) {
+    id = uuid();
+  }
+  const idx = nextToolCalls.findIndex((item) => item.id === id);
+  const current = idx >= 0 ? nextToolCalls[idx] : null;
+  const next: ToolTraceItem = {
+    id,
+    name: String(patch.name || current?.name || $t('bot.publicChatToolUnknown')),
+    status: (patch.status || current?.status || 'TOOL_CALL') as ToolStatus,
+    arguments: patch.arguments ?? current?.arguments,
+    result: patch.result ?? current?.result,
+  };
+  if (idx >= 0) {
+    nextToolCalls[idx] = next;
+  } else {
+    nextToolCalls.push(next);
+  }
+  const segments = [...(last.segments || [])];
+  const hasToolSegment = segments.some(
+    (segment) => segment.type === 'tool' && segment.toolId === id,
+  );
+  if (!hasToolSegment) {
+    segments.push({
+      id: uuid(),
+      type: 'tool',
+      toolId: id,
+    });
+    const nextCollapsed = new Set(collapsedToolIds.value);
+    nextCollapsed.add(id);
+    collapsedToolIds.value = nextCollapsed;
+  }
+  updateLastAssistantMessage({
+    toolCalls: nextToolCalls,
+    segments,
+    loading: true,
+  });
+};
+
+const isToolCollapsed = (toolId: string) => collapsedToolIds.value.has(toolId);
+const toggleToolCollapsed = (toolId: string) => {
+  const next = new Set(collapsedToolIds.value);
+  if (next.has(toolId)) {
+    next.delete(toolId);
+  } else {
+    next.add(toolId);
+  }
+  collapsedToolIds.value = next;
+};
+
+const extractToolMetaFromPayload = (payload: any) => {
+  if (!payload || typeof payload !== 'object') {
+    return null;
+  }
+  const id = payload?.tool_call_id || payload?.toolCallId || payload?.id || '';
+  const name = payload?.name || payload?.toolName || '';
+  const hasArgs = payload?.arguments !== undefined;
+  const hasResult = payload?.result !== undefined || payload?.content !== undefined;
+  if (!id && !name && !hasArgs && !hasResult) {
+    return null;
+  }
+  return {
+    id: String(id || ''),
+    name: String(name || ''),
+    arguments: hasArgs ? normalizeToolPayloadValue(payload?.arguments) : undefined,
+    result: hasResult
+      ? normalizeToolPayloadValue(payload?.result !== undefined ? payload?.result : payload?.content)
+      : undefined,
+  };
+};
+
+const handleToolSseEvent = (sseData: any, normalizedType?: string) => {
+  const payload = sseData?.payload || {};
+  const inferred = extractToolMetaFromPayload(payload);
+  const normalized = normalizedType || normalizeEventKey(sseData?.type);
+  let status = normalized as ToolStatus;
+  if (status !== 'TOOL_CALL' && status !== 'TOOL_RESULT') {
+    if (inferred?.result && !inferred?.arguments) {
+      status = 'TOOL_RESULT';
+    } else if (inferred?.arguments || inferred?.name || inferred?.id) {
+      status = 'TOOL_CALL';
+    } else {
+      return;
+    }
+  }
+  if (!inferred) {
+    return;
+  }
+  upsertToolTrace({
+    id: inferred.id,
+    name: inferred.name,
+    status,
+    arguments:
+      status === 'TOOL_CALL'
+        ? inferred.arguments
+        : undefined,
+    result:
+      status === 'TOOL_RESULT'
+        ? inferred.result
+        : undefined,
+  });
+};
+
+const handleNeedSaveToolMessage = (role: string, content: string) => {
+  if (role === 'assistant') {
+    const parsed = safeJsonParseLoose(content);
+    const toolCalls = Array.isArray(parsed?.toolCalls) ? parsed.toolCalls : [];
+    for (const call of toolCalls) {
+      upsertToolTrace({
+        id: String(call?.id || uuid()),
+        name: String(call?.name || ''),
+        status: 'TOOL_CALL',
+        arguments: normalizeToolPayloadValue(call?.arguments),
+      });
+    }
+    return;
+  }
+
+  if (role === 'tool') {
+    const parsed = safeJsonParseLoose(content);
+    const toolCallId = String(parsed?.toolCallId || parsed?.tool_call_id || '');
+    const resultText =
+      typeof parsed?.content === 'string'
+        ? parsed.content
+        : normalizeToolPayloadValue(parsed || content);
+    upsertToolTrace({
+      id: toolCallId || uuid(),
+      status: 'TOOL_RESULT',
+      result: resultText,
+    });
+  }
+};
+
+const onSseMessage = (event: ServerSentEventMessage) => {
+  if (event.event === 'done') {
+    sending.value = false;
+    updateLastAssistantMessage({ loading: false });
+    return;
+  }
+  if (!event.data) {
+    return;
+  }
+
+  let sseData: any = null;
+  try {
+    sseData = JSON.parse(event.data);
+  } catch {
+    return;
+  }
+  const eventDomain = normalizeEventKey(sseData?.domain);
+  const eventType = normalizeEventKey(sseData?.type);
+  if (
+    eventDomain === 'SYSTEM' &&
+    sseData?.payload?.code === 'SYSTEM_ERROR'
+  ) {
+    sending.value = false;
+    updateLastAssistantMessage({
+      content: sseData.payload?.message || $t('bot.publicChatInitError'),
+      loading: false,
+    });
+    return;
+  }
+
+  if (
+    eventDomain === 'TOOL'
+    || eventType === 'TOOL_CALL'
+    || eventType === 'TOOL_RESULT'
+  ) {
+    handleToolSseEvent(sseData, eventType);
+    return;
+  }
+
+  if (event.event === 'needSaveMessage') {
+    const role = String(sseData?.payload?.role || '').trim().toLowerCase();
+    const content = sseData?.payload?.content;
+    if (
+      (role === 'assistant' || role === 'user' || role === 'system' || role === 'tool')
+      && typeof content === 'string'
+    ) {
+      historyMessages.value.push({ role, content });
+      handleNeedSaveToolMessage(role, content);
+    }
+    return;
+  }
+
+  if (eventType === 'MESSAGE' && eventDomain === 'LLM') {
+    const deltaRaw = sseData?.payload?.delta ?? sseData?.payload?.content ?? '';
+    const delta = typeof deltaRaw === 'string' ? deltaRaw : normalizeToolPayloadValue(deltaRaw);
+    appendAssistantTextDelta(delta);
+  }
+
+  handleToolSseEvent(sseData, eventType);
+};
+
+const doSendMessage = () => {
+  const prompt = senderValue.value.trim();
+  if (!prompt || sending.value || blocked.value || !conversationId.value) {
+    return;
+  }
+
+  appendMessage('user', prompt);
+  appendMessage('assistant', '', true);
+  shouldAutoScroll.value = true;
+  userStoppedStreaming.value = false;
+  senderValue.value = '';
+  sending.value = true;
+
+  const requestMessages = [...historyMessages.value, { role: 'user', content: prompt }];
+
+  sseClient.post(
+    '/api/v1/bot/chat',
+    {
+      botId: botId.value,
+      prompt,
+      conversationId: conversationId.value,
+      messages: requestMessages,
+    },
+    {
+      onMessage: onSseMessage,
+      onFinished: () => {
+        sending.value = false;
+        updateLastAssistantMessage({ loading: false });
+      },
+      onError: (error: any) => {
+        sending.value = false;
+        const abortLike =
+          userStoppedStreaming.value
+          || error?.name === 'AbortError'
+          || String(error?.message || '').includes('aborted');
+        if (abortLike) {
+          const last = messages.value[messages.value.length - 1];
+          if (last?.role === 'assistant' && !last.content.trim()) {
+            updateLastAssistantMessage({
+              loading: false,
+              content: $t('bot.publicChatStopped'),
+            });
+          } else {
+            updateLastAssistantMessage({ loading: false });
+          }
+          return;
+        }
+        updateLastAssistantMessage({
+          loading: false,
+          content: $t('bot.publicChatInitError'),
+        });
+      },
+    },
+  );
+};
+
+const stopStreaming = () => {
+  userStoppedStreaming.value = true;
+  sseClient.abort();
+  sending.value = false;
+  const last = messages.value[messages.value.length - 1];
+  if (last?.role === 'assistant' && !last.content.trim()) {
+    updateLastAssistantMessage({
+      loading: false,
+      content: $t('bot.publicChatStopped'),
+    });
+    return;
+  }
+  updateLastAssistantMessage({ loading: false });
+};
+
+const onEnter = (evt: Event | KeyboardEvent) => {
+  if (!(evt instanceof KeyboardEvent)) {
+    return;
+  }
+  // 输入法组合输入期间，Enter 仅用于上屏，不触发发送
+  if (isComposing.value || evt.isComposing || evt.keyCode === 229) {
+    return;
+  }
+  if (evt.shiftKey) return;
+  evt.preventDefault();
+  doSendMessage();
+};
+
+const onCompositionStart = () => {
+  isComposing.value = true;
+};
+
+const onCompositionEnd = () => {
+  isComposing.value = false;
+};
+
+const usePresetQuestion = (question: string) => {
+  senderValue.value = question;
+  doSendMessage();
+};
+
+const initPublicChat = async () => {
+  resetConversationState();
+  initializing.value = true;
+  setPageTitle();
+
+  try {
+    if (!accessStore.accessToken) {
+      const tokenResp = await api.get('/api/temp-token/create');
+      if (tokenResp.errorCode !== 0 || !tokenResp.data) {
+        throw new Error($t('bot.publicChatInitError'));
+      }
+      accessStore.setAccessToken(tokenResp.data);
+    }
+
+    const botResp = await api.get('/api/v1/bot/getDetail', {
+      params: { id: botId.value },
+    });
+    if (botResp.errorCode !== 0 || !botResp.data) {
+      throw new Error($t('bot.publicChatInitError'));
+    }
+    botInfo.value = botResp.data;
+    setPageTitle();
+    blocked.value = !Boolean(botResp.data?.options?.anonymousEnabled);
+
+    const conversationResp = await api.get('/api/v1/bot/generateConversationId');
+    if (conversationResp.errorCode !== 0 || !conversationResp.data) {
+      throw new Error($t('bot.publicChatInitError'));
+    }
+    conversationId.value = String(conversationResp.data);
+
+    const welcomeMessage = botResp.data?.options?.welcomeMessage;
+    if (typeof welcomeMessage === 'string' && welcomeMessage.trim() !== '') {
+      appendMessage('assistant', welcomeMessage.trim());
+    }
+  } catch (error) {
+    console.error(error);
+    initError.value = $t('bot.publicChatInitError');
+    setPageTitle();
+  } finally {
+    initializing.value = false;
+  }
+};
+
+onMounted(() => {
+  initPublicChat();
+  nextTick(() => {
+    messageContainerRef.value?.addEventListener('scroll', onMessageContainerScroll, {
+      passive: true,
+    });
+    updateDockHeight();
+    if (dockRef.value && typeof ResizeObserver !== 'undefined') {
+      dockResizeObserver = new ResizeObserver(() => {
+        updateDockHeight();
+      });
+      dockResizeObserver.observe(dockRef.value);
+    }
+  });
+});
+
+watch(
+  () => route.params.botId,
+  () => {
+    initPublicChat();
+  },
+);
+
+watch(
+  () => messages.value.length,
+  () => {
+    scrollToBottom();
+  },
+);
+
+watch(
+  () => [
+    initializing.value,
+    initError.value,
+    blocked.value,
+    presetQuestions.value.length,
+    sending.value,
+  ],
+  () => {
+    nextTick(updateDockHeight);
+  },
+  { flush: 'post' },
+);
+
+onBeforeUnmount(() => {
+  sseClient.abort();
+  messageContainerRef.value?.removeEventListener('scroll', onMessageContainerScroll);
+  dockResizeObserver?.disconnect();
+  dockResizeObserver = null;
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'public-chat-page',
+      isEmbedMode ? 'public-chat-page-embed' : '',
+    ]"
+  >
+    <div class="public-chat-shell">
+      <header class="public-chat-header">
+        <div class="public-chat-title-group">
+          <ElAvatar :size="40" :src="botInfo?.icon || defaultBotAvatar" />
+          <div class="public-chat-title-wrap">
+            <h1 class="public-chat-title">
+              {{ botInfo?.title || $t('bot.publicChatTitle') }}
+            </h1>
+            <p class="public-chat-subtitle">
+              {{ $t('bot.publicChatSubtitle') }}
+            </p>
+          </div>
+        </div>
+      </header>
+
+      <main ref="messageContainerRef" class="public-chat-messages" :style="messageContainerStyle">
+        <ElSkeleton :loading="initializing" animated :rows="5">
+          <template #default>
+            <div v-if="initError" class="public-chat-banner public-chat-banner-error">
+              {{ initError }}
+            </div>
+            <div v-else-if="blocked" class="public-chat-banner public-chat-banner-warning">
+              <p class="public-chat-banner-title">{{ $t('bot.publicPageBlocked') }}</p>
+              <p>{{ $t('bot.publicPageBlockedTip') }}</p>
+            </div>
+            <template v-else>
+              <div
+                v-for="item in messages"
+                :key="item.id"
+                :class="[
+                  'public-chat-message-row',
+                  item.role === 'user' ? 'is-user' : 'is-assistant',
+                ]"
+              >
+                <ElAvatar
+                  v-if="item.role === 'assistant'"
+                  :size="34"
+                  :src="botInfo?.icon || defaultBotAvatar"
+                  class="public-chat-message-avatar"
+                />
+                <div class="public-chat-message">
+                  <div
+                    :class="[
+                      'public-chat-bubble',
+                      item.role === 'user' ? 'public-chat-bubble-user' : 'public-chat-bubble-assistant',
+                    ]"
+                  >
+                    <template v-if="item.role === 'user'">
+                      <span>{{ item.content }}</span>
+                    </template>
+                    <template v-else>
+                      <template v-if="item.loading && !hasAssistantRenderableContent(item)">
+                        <span class="public-chat-waiting">
+                          <span class="public-chat-waiting-spinner"></span>
+                          <span>{{ $t('bot.publicChatThinking') }}</span>
+                        </span>
+                      </template>
+                      <template v-else>
+                        <div
+                          v-for="segment in getRenderableSegments(item)"
+                          :key="segment.id"
+                          :class="[
+                            'public-chat-segment',
+                            segment.type === 'tool' ? 'is-tool' : 'is-text',
+                          ]"
+                        >
+                          <template v-if="segment.type === 'text'">
+                            <ElXMarkdown
+                              class="public-chat-markdown"
+                              :markdown="segment.content"
+                            />
+                          </template>
+                          <template v-else>
+                            <template v-if="getToolById(item, segment.toolId)">
+                              <div class="public-chat-tool-segment">
+                                <div class="public-chat-tool-item">
+                                  <div class="public-chat-tool-header">
+                                    <span class="public-chat-tool-name">
+                                      <IconifyIcon icon="solar:widget-5-outline" />
+                                      {{ getToolById(item, segment.toolId)?.name }}
+                                    </span>
+                                    <div class="public-chat-tool-actions">
+                                      <span
+                                        :class="[
+                                          'public-chat-tool-status',
+                                          getToolById(item, segment.toolId)?.status === 'TOOL_RESULT' ? 'is-done' : 'is-calling',
+                                        ]"
+                                      >
+                                        {{
+                                          getToolById(item, segment.toolId)?.status === 'TOOL_RESULT'
+                                            ? $t('bot.publicChatToolDone')
+                                            : $t('bot.publicChatToolCalling')
+                                        }}
+                                      </span>
+                                      <button
+                                        class="public-chat-tool-toggle"
+                                        type="button"
+                                        @click="toggleToolCollapsed(segment.toolId)"
+                                      >
+                                        {{
+                                          isToolCollapsed(segment.toolId)
+                                            ? $t('bot.publicChatToolExpand')
+                                            : $t('bot.publicChatToolCollapse')
+                                        }}
+                                      </button>
+                                    </div>
+                                  </div>
+                                  <pre
+                                    v-if="!isToolCollapsed(segment.toolId) && getToolById(item, segment.toolId)?.arguments"
+                                    class="public-chat-tool-content"
+                                  >{{ getToolById(item, segment.toolId)?.arguments }}</pre>
+                                  <pre
+                                    v-if="!isToolCollapsed(segment.toolId) && getToolById(item, segment.toolId)?.result && getToolById(item, segment.toolId)?.status === 'TOOL_RESULT'"
+                                    class="public-chat-tool-content"
+                                  >{{ getToolById(item, segment.toolId)?.result }}</pre>
+                                </div>
+                              </div>
+                            </template>
+                          </template>
+                        </div>
+                        <span v-if="item.loading" class="public-chat-dot-typing">
+                          <i></i><i></i><i></i>
+                        </span>
+                      </template>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </template>
+        </ElSkeleton>
+      </main>
+
+      <div ref="dockRef" class="public-chat-dock">
+        <section v-if="!initializing && !initError && !blocked" class="public-chat-preset-list">
+          <button
+            v-for="item in presetQuestions"
+            :key="item.key"
+            class="public-chat-preset-item"
+            type="button"
+            @click="usePresetQuestion(item.description)"
+          >
+            {{ item.description }}
+          </button>
+        </section>
+
+        <footer class="public-chat-footer">
+          <div class="public-chat-composer">
+            <ElInput
+              class="public-chat-input"
+              v-model="senderValue"
+              type="textarea"
+              :rows="2"
+              resize="none"
+              :placeholder="$t('bot.publicChatPlaceholder')"
+              :disabled="blocked || initializing || !!initError || sending"
+              @keydown.enter="onEnter"
+              @compositionstart="onCompositionStart"
+              @compositionend="onCompositionEnd"
+            />
+            <span class="public-chat-footer-hint">
+              {{ $t('bot.publicChatInputHint') }}
+            </span>
+            <ElButton
+              v-if="sending"
+              plain
+              class="public-chat-input-send-btn is-stop"
+              @click="stopStreaming"
+            >
+              <template #icon>
+                <IconifyIcon icon="solar:stop-circle-outline" />
+              </template>
+              {{ $t('bot.publicChatStop') }}
+            </ElButton>
+            <ElButton
+              v-else
+              type="primary"
+              class="public-chat-input-send-btn"
+              :disabled="blocked || initializing || !!initError || !senderValue.trim()"
+              @click="doSendMessage"
+            >
+              <template #icon>
+                <IconifyIcon icon="solar:plain-linear" />
+              </template>
+              {{ $t('bot.publicChatSend') }}
+            </ElButton>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.public-chat-page {
+  --pc-primary: #2563eb;
+  --pc-primary-soft: #dbeafe;
+  --pc-ink-strong: #0f172a;
+  --pc-ink: #1e293b;
+  --pc-ink-soft: #475569;
+  --pc-line: #e2e8f0;
+  --pc-line-soft: #edf2f7;
+  --pc-surface: #ffffff;
+  --pc-surface-soft: #f8fbff;
+  --pc-surface-muted: #f8fafc;
+  box-sizing: border-box;
+  position: relative;
+  isolation: isolate;
+  min-height: 100vh;
+  padding: 24px;
+  overflow: hidden;
+  background:
+    radial-gradient(1200px 360px at 100% -20%, rgb(37 99 235 / 14%) 0%, transparent 60%),
+    radial-gradient(900px 300px at -10% 120%, rgb(14 165 233 / 12%) 0%, transparent 62%),
+    linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
+}
+
+.public-chat-page::before {
+  position: absolute;
+  inset: -30% auto auto -20%;
+  z-index: -1;
+  width: 440px;
+  height: 440px;
+  content: '';
+  pointer-events: none;
+  background: radial-gradient(circle, rgb(59 130 246 / 16%) 0%, transparent 68%);
+  filter: blur(8px);
+}
+
+.public-chat-page-embed {
+  min-height: 100%;
+  padding: 0;
+  background: var(--pc-surface-soft);
+}
+
+.public-chat-page-embed::before {
+  content: none;
+}
+
+.public-chat-shell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: 980px;
+  height: calc(100vh - 48px);
+  margin: 0 auto;
+  overflow: hidden;
+  background: var(--pc-surface);
+  border: 1px solid var(--pc-line);
+  border-radius: 20px;
+  box-shadow:
+    0 2px 6px rgb(15 23 42 / 5%),
+    0 24px 48px rgb(15 23 42 / 8%);
+}
+
+.public-chat-page-embed .public-chat-shell {
+  height: 100vh;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.public-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  background: rgb(255 255 255 / 92%);
+  border-bottom: 1px solid var(--pc-line-soft);
+  backdrop-filter: saturate(130%) blur(6px);
+}
+
+.public-chat-title-group {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.public-chat-title-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.public-chat-title {
+  margin: 0;
+  font-family: Manrope, 'Noto Sans SC', sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.35;
+  letter-spacing: 0.01em;
+  color: var(--pc-ink-strong);
+}
+
+.public-chat-subtitle {
+  margin: 0;
+  font-size: 12px;
+  color: #64748b;
+  letter-spacing: 0.02em;
+}
+
+.public-chat-messages {
+  flex: 1;
+  padding: 20px 24px var(--public-chat-dock-space, 180px);
+  overflow-y: auto;
+  background: rgb(255 255 255);
+}
+
+.public-chat-banner {
+  padding: 14px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  border-radius: 10px;
+}
+
+.public-chat-banner-title {
+  margin: 0 0 4px;
+  font-weight: 600;
+}
+
+.public-chat-banner-error {
+  color: #b42318;
+  background: #fff1f2;
+  border: 1px solid #fecdd3;
+}
+
+.public-chat-banner-warning {
+  color: #9a3412;
+  background: #fffbeb;
+  border: 1px solid #fed7aa;
+}
+
+.public-chat-message-row {
+  display: flex;
+  margin-bottom: 18px;
+  animation: message-fade-in 0.22s ease;
+}
+
+.public-chat-message-row.is-user {
+  justify-content: flex-end;
+}
+
+.public-chat-message-row.is-assistant {
+  align-items: flex-start;
+  gap: 10px;
+  justify-content: flex-start;
+}
+
+.public-chat-message-avatar {
+  flex: 0 0 auto;
+  margin-top: 1px;
+}
+
+.public-chat-message {
+  min-width: 0;
+  max-width: min(88%, 760px);
+}
+
+.public-chat-bubble {
+  display: inline-block;
+  min-width: 72px;
+  min-height: 44px;
+  padding: 11px 14px;
+  font-size: 14px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  border-radius: 12px;
+}
+
+.public-chat-bubble-user {
+  color: #ffffff;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  border-top-right-radius: 4px;
+  box-shadow: 0 6px 16px rgb(37 99 235 / 24%);
+}
+
+.public-chat-bubble-assistant {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: auto;
+  padding: 0;
+  color: #0f172a;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.public-chat-dot-typing {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: 6px;
+}
+
+.public-chat-dot-typing i {
+  width: 4px;
+  height: 4px;
+  background: #64748b;
+  border-radius: 50%;
+  animation: dot-pulse 1.2s infinite ease-in-out;
+}
+
+.public-chat-dot-typing i:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.public-chat-dot-typing i:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.public-chat-segment {
+  margin-bottom: 10px;
+}
+
+.public-chat-segment:last-child {
+  margin-bottom: 0;
+}
+
+.public-chat-segment.is-text {
+  white-space: normal;
+}
+
+.public-chat-segment.is-tool {
+  display: block;
+  margin: 12px 0;
+}
+
+.public-chat-waiting {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+  color: var(--pc-ink-soft);
+}
+
+.public-chat-waiting-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #bfdbfe;
+  border-top-color: #2563eb;
+  border-radius: 50%;
+  animation: waiting-spin 0.8s linear infinite;
+}
+
+.public-chat-tool-segment {
+  width: 560px;
+  max-width: 560px;
+}
+
+.public-chat-message-row.is-assistant .public-chat-tool-segment {
+  max-width: min(560px, 100%);
+}
+
+.public-chat-tool-item {
+  width: 100%;
+  font-size: 12px;
+  line-height: 1.45;
+  padding: 10px 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  border: 1px solid #d7e2f2;
+  border-left: 3px solid var(--pc-primary);
+  border-radius: 12px;
+  box-shadow: 0 2px 6px rgb(15 23 42 / 5%);
+}
+
+.public-chat-markdown {
+  color: var(--pc-ink);
+}
+
+.public-chat-markdown :deep(*) {
+  overflow-wrap: anywhere;
+}
+
+.public-chat-markdown :deep(p) {
+  margin: 0 0 10px;
+}
+
+.public-chat-markdown :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.public-chat-markdown :deep(a) {
+  color: var(--pc-primary);
+  text-decoration: underline;
+  word-break: break-all;
+}
+
+.public-chat-markdown :deep(img) {
+  display: block;
+  max-width: min(100%, 420px);
+  height: auto;
+  margin: 10px 0;
+  border: 1px solid #dbe5f1;
+  border-radius: 10px;
+  box-shadow: 0 6px 18px rgb(15 23 42 / 8%);
+}
+
+.public-chat-markdown :deep(pre) {
+  padding: 10px 12px;
+  overflow: auto;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+}
+
+.public-chat-tool-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.public-chat-tool-actions {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.public-chat-tool-name {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--pc-ink-strong);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.public-chat-tool-status {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 1.25;
+  border: 1px solid transparent;
+  border-radius: 999px;
+}
+
+.public-chat-tool-status.is-calling {
+  color: #1d4ed8;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.public-chat-tool-status.is-done {
+  color: #15803d;
+  background: #ecfdf3;
+  border-color: #bbf7d0;
+}
+
+.public-chat-tool-toggle {
+  padding: 3px 10px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: #334155;
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d7e2f2;
+  border-radius: 999px;
+  transition: all 0.15s ease;
+}
+
+.public-chat-tool-toggle:hover {
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+
+.public-chat-tool-content {
+  max-height: 160px;
+  padding: 9px 10px;
+  margin: 8px 0 0;
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #334155;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+}
+
+.public-chat-dock {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 12;
+  padding: 0 24px 18px;
+  pointer-events: none;
+}
+
+.public-chat-preset-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0 4px 0;
+  margin-bottom: 10px;
+  pointer-events: auto;
+  background: transparent;
+  border-top: 0;
+}
+
+.public-chat-preset-item {
+  max-width: 100%;
+  padding: 8px 14px;
+  overflow: hidden;
+  font-size: 12px;
+  color: #334155;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background: rgb(255 255 255 / 96%);
+  border: 1px solid #dbe3ef;
+  border-radius: 999px;
+  box-shadow: 0 4px 12px rgb(15 23 42 / 8%);
+  transition: all 0.18s ease;
+}
+
+.public-chat-preset-item:hover {
+  color: #1d4ed8;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.public-chat-footer {
+  padding: 0 10px;
+  pointer-events: auto;
+  background: transparent;
+  border-top: 0;
+}
+
+.public-chat-composer {
+  position: relative;
+  padding: 0 0 4px;
+  overflow: hidden;
+  background: rgb(255 255 255);
+  border: 1px solid #dce5f1;
+  border-radius: 22px;
+  box-shadow:
+    0 8px 26px rgb(15 23 42 / 10%),
+    0 1px 0 rgb(255 255 255 / 95%) inset;
+}
+
+.public-chat-footer-hint {
+  position: absolute;
+  bottom: 16px;
+  left: 18px;
+  z-index: 1;
+  font-size: 12px;
+  color: #94a3b8;
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+.public-chat-input-send-btn {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  z-index: 2;
+  height: 40px;
+  padding: 0 15px;
+  border-radius: 999px;
+}
+
+.public-chat-input-send-btn.is-stop {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.public-chat-input :deep(.el-textarea__inner) {
+  min-height: 126px !important;
+  font-size: 14px;
+  line-height: 1.6;
+  background: rgb(255 255 255);
+  border-color: transparent;
+  border-radius: 20px;
+  padding: 16px 124px 48px 18px;
+  box-shadow: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.public-chat-input :deep(.el-textarea) {
+  background: rgb(255 255 255);
+}
+
+.public-chat-input :deep(.el-textarea__inner:focus) {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
+}
+
+@keyframes message-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dot-pulse {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.75);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes waiting-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (width <= 768px) {
+  .public-chat-page {
+    padding: 0;
+  }
+
+  .public-chat-shell {
+    height: 100vh;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .public-chat-header,
+  .public-chat-messages {
+    padding-right: 14px;
+    padding-left: 14px;
+  }
+
+  .public-chat-dock {
+    padding-right: 14px;
+    padding-bottom: 12px;
+    padding-left: 14px;
+  }
+
+  .public-chat-preset-list {
+    gap: 6px;
+    margin-bottom: 8px;
+    padding-right: 2px;
+    padding-left: 2px;
+  }
+
+  .public-chat-footer {
+    padding-right: 6px;
+    padding-left: 6px;
+  }
+
+  .public-chat-message {
+    max-width: 94%;
+  }
+
+  .public-chat-input :deep(.el-textarea__inner) {
+    min-height: 118px !important;
+    padding-right: 118px;
+    padding-bottom: 46px;
+  }
+}
+</style>