perf: 主agent样式调整

src/components/xt-chat/chat-view/components/right-view/index.vue

@@ -76,7 +76,7 @@ export default {
     };
     const renderHeader = () => {
       return (
-        <header class="header flex justify-end items-center mb-16px px-32px">
+        <header class="header flex justify-end items-center mb-16px px-16px">
           {hasMediaCenter.value && (
             <Button
               type="outline"
@@ -175,7 +175,7 @@ export default {
         return null;
       };
       return (
-        <section class="flex-1 overflow-y-auto content flex justify-center px-32px">
+        <section class="flex-1 overflow-y-auto content flex justify-center px-16px">
           <Bubble
             ref={bubbleRef}
             placement="start"

src/components/xt-chat/chat-view/components/sender-input/index.vue

@@ -84,7 +84,7 @@ export default {
     });
 
     return () => (
-      <div class="sender-input-wrap full h-120px">
+      <section class="sender-input-wrap full h-120px">
         <Sender
           v-model:value={localSearchValue.value}
           ref={senderRef}
@@ -94,7 +94,7 @@ export default {
           placeholder={props.placeholder}
           actions={() => renderActions()}
         />
-      </div>
+      </section>
     );
   },
 };

src/components/xt-chat/chat-view/constants.ts

@@ -34,8 +34,7 @@ export const REMOTE_USER_ROLE = 'user'; // 接口返回用户
 export const REMOTE_ASSISTANT_ROLE = 'assistant'; // 接口返回智能体
 
 export const ROLE_STYLE = {
-  width: '600px',
+  width: 'var(--max-content-width)',
-  margin: '0 auto',
 };
 
 export const ANSWER_STYLE = {

src/components/xt-chat/chat-view/index.vue

@@ -149,8 +149,8 @@ export default {
     });
 
     return () => (
-      <div class="chat-view-wrap w-full h-full flex">
+      <div class={`chat-view-wrap w-full h-full flex ${showRightView.value ? 'show-right-view' : ''}`}>
-        <section class="flex-1 flex flex-col pt-20px justify-center relative pl-16px pr-2px">
+        <section class="flex-1 flex flex-col pt-20px justify-center relative bubble-wrap">
           <div class="flex-1 overflow-hidden pb-20px">
             <BubbleList
               ref={bubbleListRef}
@@ -165,7 +165,7 @@ export default {
             <SenderInput
               v-model={searchValue.value}
               ref={senderRef}
-              class="w-600px"
+              style={{ 'width': 'var(--max-content-width)' }}
               placeholder="继续追问..."
               loading={generateLoading.value}
               onSubmit={handleSubmit}

src/components/xt-chat/chat-view/style.scss

@@ -1,4 +1,8 @@
+$bubble-wrap-padding-left: 16px;
+$bubble-wrap-padding-right: 2px;
 .chat-view-wrap {
+  --max-content-width: 900px;
+  --max-question-width: 500px;
   .cts {
     color: var(--Text-1, #737478);
     font-size: 14px;
@@ -6,7 +10,14 @@
     font-weight: 400;
     line-height: 22px;
   }
-  :deep(.xt-bubble) {
+  .bubble-wrap {
+    padding-left: $bubble-wrap-padding-left;
+    padding-right: $bubble-wrap-padding-right;
+  }
+  :deep(.xt-bubble-list) {
+    align-items: center;
+    padding-right: $bubble-wrap-padding-left - $bubble-wrap-padding-right;
+    .xt-bubble {
       .file-card {
         border-radius: 12px;
         border: 1px solid var(--Border-2, #e6e6e8);
@@ -17,4 +28,9 @@
         align-items: center;
       }
     }
+  }
+  &.show-right-view {
+    --max-content-width: 596px;
+    --max-question-width: 396px;
+  }
 }

src/components/xt-chat/chat-view/useChatHandler.tsx

@@ -86,9 +86,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       shape: 'round',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-400px">
+        return <div style={{ 'max-width': 'var(--max-question-width)' }}>{message}</div>;
-          {message}
-        </div>;
       },
     },
     [REMOTE_USER_ROLE]: {
@@ -96,9 +94,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       shape: 'round',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-600px">
+        return <div style={{ 'max-width': 'var(--max-question-width)' }}>{message}</div>;
-          {message}
-        </div>;
       },
     },
     [REMOTE_ASSISTANT_ROLE]: {
@@ -106,14 +102,16 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
       variant: 'borderless',
       style: ROLE_STYLE,
       messageRender: (message: string) => {
-        return <div class="max-w-600px markdown-wrap" v-html={md.render(message)} />;
+        return (
+          <div class="markdown-wrap" style={{ 'max-width': 'var(--max-content-width)' }} v-html={md.render(message)} />
+        );
       },
       footer: (params) => {
         const { content, item } = params as { content: string; item: MESSAGE.Answer };
         const isShow = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
         return (
           <div class="flex items-center">
-            <Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }} >
+            <Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }}>
               <div class="action-box">
                 <IconCopy size={16} class="color-#737478" />
               </div>
@@ -318,7 +316,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
     // 含有思考过程，折叠思考过程，展示结果
     if (_hasRunTask) {
       setRunTaskCollapse(teamRunTaskId, false);
-      const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理')
+      const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理');
       if (_targetData) {
         showRightView.value = true;
         rightViewDataSource.value = extra_data.data;
@@ -345,8 +343,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
             )}
           </>
         );
-      }
+      };
-
     } else {
       _targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
     }
@@ -418,6 +415,6 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
     conversationList,
     showRightView,
     rightViewDataSource,
-    rightPreviewData
+    rightPreviewData,
   };
 }