feat(chat): 优化聊天界面样式和功能

- 调整了聊天内容区域的样式，包括边框、背景色等
- 新增了吸顶 header 功能，提高用户体验
- 添加了推荐问题标签，便于用户快速选择问题
- 优化了代码结构，提高了组件的可维护性

web/components/chat/chat-content/vis-thinking.tsx

@@ -11,13 +11,13 @@ export function VisThinking({ content }: Props) {
   const [expanded, setExpanded] = React.useState(true); // Control the expansion of the thinking process
   // console.log("VisThinking", content)
   return (
-    <div className='my-4 border rounded-lg overflow-hidden dark:border-gray-600'>
+    <div className='mt-1 mb-4 border-0 rounded-lg overflow-hidden dark:border-gray-600'>
       <div
-        className='flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 cursor-pointer'
+        className='flex items-center justify-between px-2 py-1 rounded-lg w-fit bg-neutral-100 dark:bg-gray-800 cursor-pointer'
         onClick={() => setExpanded(!expanded)}
       >
         <div className='flex items-center'>
-          <span className='mr-2 font-medium text-gray-700 dark:text-gray-300'>
+          <span className='mr-2 font-thin text-[16px] text-gray-500 dark:text-gray-300'>
             {expanded ? <DownOutlined /> : <RightOutlined />}
           </span>
           <span className='text-gray-700 dark:text-gray-300'>{t('cot_title')}</span>
@@ -25,8 +25,8 @@ export function VisThinking({ content }: Props) {
       </div>
 
       {expanded && (
-        <div className='p-4 bg-white dark:bg-gray-900 border-t dark:border-gray-700'>
-          <div className='py-2 px-4 border-l-4 border-blue-600 rounded bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300'>
+        <div className='p-4 bg-white dark:bg-gray-900 border-0 dark:border-gray-700'>
+          <div className='py-2 px-4 border-l-2 border-gray-200 rounded bg-gray-0 dark:bg-gray-800 text-gray-400 dark:text-gray-300'>
             {content || ''}
           </div>
         </div>

web/new-components/chat/content/ChatCompletion.tsx

@@ -86,7 +86,7 @@ const ChatCompletion: React.FC = () => {
   }, [history, history[history.length - 1]?.context]);
 
   return (
-    <div className='flex flex-col w-5/6 mx-auto position-relative' ref={scrollableRef} style={{ position: 'relative' }}>
+    <div className='flex flex-col w-5/6 mx-auto position-relative top-[2rem]' ref={scrollableRef} style={{ position: 'relative' }}>
       <div
         style={{
           transform: 'translate(70%, -70%)',

web/new-components/chat/header/ChatHeader.tsx

@@ -2,7 +2,7 @@ import { apiInterceptors, collectApp, unCollectApp } from '@/client/api';
 import { ChatContentContext } from '@/pages/chat';
 import { ExportOutlined, LoadingOutlined, StarFilled, StarOutlined, createFromIconfontCN } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
-import { Spin, Tag, Typography, message } from 'antd';
+import { Spin, Tag, Typography, message, Tooltip } from 'antd';
 import copy from 'copy-to-clipboard';
 import React, { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -145,7 +145,7 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
   // 吸顶header
   const topHeaderContent = () => {
     return (
-      <header className='flex items-center border-1 border-b border-[#eee] justify-between w-full h-14 bg-[rgba(255,255,255,0.9)] dark:bg-[rgba(41,63,89,0.9)]  px-8 transition-all duration-500 ease-in-out'>
+      <header className='flex items-center border-b border-[#e3e3e3] justify-between w-full h-14 bg-[rgba(255,255,255,0.9)] dark:bg-[rgba(41,63,89,0.9)]  px-8 transition-all duration-500 ease-in-out'>
         <div className='flex items-center'>
           <div className='flex items-center justify-center w-8 h-8 rounded-lg mr-2 bg-white'>
             <AppDefaultIcon scene={appScene} />
@@ -195,15 +195,51 @@ const ChatHeader: React.FC<{ isScrollToTop: boolean }> = ({ isScrollToTop }) =>
             }}
           />
         </div>
+        {!!appInfo?.recommend_questions?.length && (
+          <div className='absolute flex justify-start items-start bottom-[-3.75rem] left-[50%] w-full transform translate-x-[-50%]  pt-1 px-20 overflow-hidden bg-[rgba(255,255,255,0.9)] dark:bg-[rgba(41,63,89,0.9)]'>
+            <span className='text-xs text-[#333333] dark:text-[rgba(255,255,255,0.65)] leading-6 w-[100px] flex-none'>或许你想问：</span>
+            <div className='flex flex-wrap gap-1 overflow-scroll flex-1 h-14'>
+              {appInfo.recommend_questions.map((item, index) => (
+                <Tooltip key={item.id} title={item.question}>
+                  <Tag
+                    key={item.id}
+                    color={tagColors[index]}
+                    className='text-xs p-0.5 px-1 cursor-pointer w-40 truncate'
+                    onClick={async () => {
+                      handleChat(item?.question || '', {
+                        app_code: appInfo.app_code,
+                        ...(paramKey.includes('temperature') && { temperature: temperatureValue }),
+                        ...(paramKey.includes('resource') && {
+                          select_param:
+                            typeof resourceValue === 'string'
+                              ? resourceValue
+                              : JSON.stringify(resourceValue) || currentDialogue.select_param,
+                        }),
+                      });
+                      setTimeout(() => {
+                        scrollRef.current?.scrollTo({
+                          top: scrollRef.current?.scrollHeight,
+                          behavior: 'smooth',
+                        });
+                      }, 0);
+                    }}
+                  >
+                    {item.question}
+                  </Tag>
+                </Tooltip>
+              ))}
+            </div>
+
+          </div>
+        )}
       </header>
     );
   };
 
   return (
     <div
-      className={`h-14 ${
-        appInfo?.recommend_questions && appInfo?.recommend_questions?.length > 0 ? 'mb-6' : ''
-      } sticky top-0 z-30 transition-all duration-400 ease-in-out`}
+      className={`h-14 ${appInfo?.recommend_questions && appInfo?.recommend_questions?.length > 0 ? 'mb-6' : ''
+        } sticky top-0 z-30 transition-all duration-400 ease-in-out`}
     >
       {topHeaderContent()}
     </div>