refactor(agent): 优化客服和工作流界面布局和样式

- 调整了客服和工作流界面的栅格布局，优化了不同屏幕大小下的显示效果- 改进了历史聊天记录的展示方式，增加了 tooltip 和自适应布局
- 统一了聊天窗口的样式，增加了反馈功能- 优化了工作流内容区域的样式，使其更加适应长内容展示

src/views/agent/chat/index.vue

@@ -2,36 +2,38 @@
   <div class="chat-wrap">
     <span @click="goChatIndex"> <icon-left /> 返回空间 </span>
     <div class="chat-contain">
-      <!-- 使用 arco-design 栅格布局 -->
       <a-row :gutter="24" class="chat-grid">
         <!-- 左侧 HistoryChat -->
-        <a-col     :xs="isCollapsed ? 0 : 24"
-                   :sm="isCollapsed ? 0 : 12"
-                   :md="isCollapsed ? 0 : 8"
-                   :lg="isCollapsed ? 0 : 6"
-                   :xl="isCollapsed ? 0 : 7"
-                   :xxl="isCollapsed ? 0 : 4"
-                   class="history-chat-col">
+        <a-col
+          :xs="isCollapsed ? 0 : 3"
+          :sm="isCollapsed ? 0 : 4"
+          :md="isCollapsed ? 0 : 5"
+          :lg="isCollapsed ? 0 : 6"
+          :xl="isCollapsed ? 0 : 7"
+          :xxl="isCollapsed ? 0 : 7"
+          class="history-chat-col"
+        >
           <HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
         </a-col>
 
         <!-- 右侧聊天内容 -->
-        <a-col    :xs="24"
-                  :sm="isCollapsed ? 24 : 12"
-                  :md="isCollapsed ? 24 : 16"
-                  :lg="isCollapsed ? 24 : 18"
-                  :xl="isCollapsed ? 24 : 16"
-                  :xxl="isCollapsed ? 24 : 16"
-                  class="chat-content-col">
-
+        <a-col
+          :xs="24"
+          :sm="isCollapsed ? 24 : 13"
+          :md="isCollapsed ? 24 : 14"
+          :lg="isCollapsed ? 24 : 15"
+          :xl="isCollapsed ? 24 : 16"
+          :xxl="isCollapsed ? 24 : 16"
+          class="chat-content-col"
+        >
           <a-card :bordered="false">
-            <div class="chat-content-col" style="min-height: fit-content;">
+            <div class="chat-content-col" style="min-height: fit-content">
               <div class="toggle-btn" @click="toggleCollapse">
                 <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
                   <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
                 </a-tooltip>
               </div>
-              <div id="coze-chat-container" ></div>
+              <div id="coze-chat-container"></div>
             </div>
           </a-card>
         </a-col>
@@ -107,7 +109,7 @@ const cozeInfo = reactive({
 let cozeWebSDK = null;
 const initChat = async () => {
   const { code, data } = await getChatAgent(query.id);
-  if (code != 200) {
+  if (code !== 200) {
     return false;
   }
 
@@ -129,15 +131,31 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
     ui: {
       chatBot: {
         el: document.getElementById('coze-chat-container'),
-        width: '95%',
+        width: '100%',
         height: '100%',
         title: name,
         isNeedFunctionCallMessage: true,
+        feedback: {
+          isNeedFeedback: true,
+          feedbackPanel: {
+            title: '您对这个回答有什么看法？请告诉我们',
+            placeholder: '请详细描述您的问题...',
+            tags: [
+              {
+                label: '信息不正确',
+              },
+              {
+                label: '涉及敏感信息',
+                isNeedDetail: true,
+              },
+            ],
+          },
+        },
       },
       base: {
         icon: '',
         zIndex: 1000,
-        lang:'zh-CN'
+        lang: 'zh-CN',
       },
       footer: {
         expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
@@ -147,9 +165,9 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
       },
       conversations: {
         isNeed: true,
-        isNeedAddNewConversationBoolean: true,
-        isNeedQuoteBoolean: true,
-      }
+        isNeedAddNewConversation: true,
+        isNeedQuote: true,
+      },
     },
     auth: auth,
     userInfo: userInfo,