From 1c633967c8505dff30b58c59e6a7d028a6b5896b Mon Sep 17 00:00:00 2001
From: Cano1997 <1978141412@qq.com>
Date: Mon, 17 Mar 2025 21:54:05 +0800
Subject: [PATCH] =?UTF-8?q?style:=20AI=E4=BA=A4=E4=BA=92=E7=AA=97=E9=9C=80?=
 =?UTF-8?q?=E6=B1=82=E5=8F=8A=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat-container/chat-container.scss        | 18 ++++++++++++++++-
 src/components/chat-input/chat-input.scss     |  8 ++++----
 .../markdown-message/markdown-message.scss    | 20 ++++++++++++++++++-
 .../chat-messages/chat-messages.scss          |  8 +++-----
 src/components/chat-toolbar/chat-toolbar.tsx  | 12 ++++++++++-
 .../chat-topic-item/chat-topic-item.scss      |  3 ++-
 6 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/components/chat-container/chat-container.scss b/src/components/chat-container/chat-container.scss
index f7e664d..1efd5e4 100644
--- a/src/components/chat-container/chat-container.scss
+++ b/src/components/chat-container/chat-container.scss
@@ -16,7 +16,10 @@ $ai-chat: (
   // 样式2
   'color-2': #4d6bfe,
   'background-color-2': rgb(219 234 254),
-  'hover-background-color-2': #c3daf8
+  'hover-background-color-2': #c3daf8,
+  'scroll-bar-width': 8px,
+  'scroll-bar-height': 8px,
+  'scroll-bar-radius': 4px,
 );
 
 @include b(chat-container) {
@@ -53,6 +56,15 @@ $ai-chat: (
     justify-content: center;
     margin: 8px;
   }
+
+  *::-webkit-scrollbar {
+    width: getCssVar('ai-chat', 'scroll-bar-width');
+    height: getCssVar('ai-chat', 'scroll-bar-height');
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border-radius: getCssVar('ai-chat', 'scroll-bar-radius');
+  }
 }
 
 @include b(chat-container-header) {
@@ -119,6 +131,10 @@ $ai-chat: (
     bottom: 118px;
     width: 100%;
     margin: 0;
+
+    &.is-has-materials {
+      bottom: 180px;
+    }
   }
   .#{bem(chat-messages)} {
     padding-bottom: 48px;
diff --git a/src/components/chat-input/chat-input.scss b/src/components/chat-input/chat-input.scss
index 1e7ceb2..09699c8 100644
--- a/src/components/chat-input/chat-input.scss
+++ b/src/components/chat-input/chat-input.scss
@@ -1,5 +1,5 @@
 @include b(chat-input-material-wrapper) {
-  max-height: 6em;
+  max-height: 90px;
   padding: 4px;
   overflow: hidden auto;
   font-size: 16px;
@@ -28,13 +28,13 @@
 
   // 设置滚动条样式
   &::-webkit-scrollbar {
-    width: 6px;
+    width: getCssVar('ai-chat', 'scroll-bar-width');
+    height: getCssVar('ai-chat', 'scroll-bar-height');
   }
 
   // 滚动条轨道
   &::-webkit-scrollbar-thumb {
-    // 设置滚动条颜色
-    background-color: #ccc;
+    background-color: getCssVar(color, fill, 2);
     border-radius: #{getCssVar('ai-chat', 'border-radius')};
   }
 }
diff --git a/src/components/chat-message-item/markdown-message/markdown-message.scss b/src/components/chat-message-item/markdown-message/markdown-message.scss
index ce6e04b..bf0cf39 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.scss
+++ b/src/components/chat-message-item/markdown-message/markdown-message.scss
@@ -4,6 +4,24 @@
   .cherry {
     border-radius: #{getCssVar('ai-chat', 'border-radius')};
     box-shadow: none;
+
+    *::-webkit-scrollbar {
+      width: getCssVar('ai-chat', 'scroll-bar-width');
+      height: getCssVar('ai-chat', 'scroll-bar-height');
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background-color: getCssVar(color, fill, 2);
+      border-radius: getCssVar('ai-chat', 'scroll-bar-radius');
+    }
+
+    *::-webkit-scrollbar-thumb:hover {
+      background-color: getCssVar(color, fill, 2);
+    }
+  }
+
+  .cherry-markdown pre {
+    background-color: getCssVar(ai-chat, background, color);
   }
 
   .cherry-markdown pre {
@@ -15,7 +33,7 @@
     border: 0;
 
     figure {
-      max-width: 400px;
+      max-width: 1200px;
 
       > svg {
         width: 100%;
diff --git a/src/components/chat-messages/chat-messages.scss b/src/components/chat-messages/chat-messages.scss
index 2611191..b9acd8d 100644
--- a/src/components/chat-messages/chat-messages.scss
+++ b/src/components/chat-messages/chat-messages.scss
@@ -1,9 +1,8 @@
 @include b(chat-messages) {
-  margin: 6px;
   width: calc(100% - 12px);
   height: calc(100% - 12px);
-  overflow-x: hidden;
-  overflow-y: auto;
+  margin: 6px;
+  overflow: hidden auto;
 
   // 设置滚动条样式
   &::-webkit-scrollbar {
@@ -12,8 +11,7 @@
 
   // 滚动条轨道
   &::-webkit-scrollbar-thumb {
-    // 设置滚动条颜色
-    background-color: #ccc;
+    background-color: getCssVar(color, fill, 2);
     border-radius: #{getCssVar('ai-chat', 'border-radius')};
   }
 }
diff --git a/src/components/chat-toolbar/chat-toolbar.tsx b/src/components/chat-toolbar/chat-toolbar.tsx
index c91a123..562dd42 100644
--- a/src/components/chat-toolbar/chat-toolbar.tsx
+++ b/src/components/chat-toolbar/chat-toolbar.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useContext, useMemo } from 'preact/hooks';
+import { useComputed } from '@preact/signals';
 import { Namespace } from '../../utils';
 import { IChatToolbarItem } from '../../interface';
 import { AiChatController } from '../../controller';
@@ -81,6 +82,10 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
     },
   ];
 
+  const hasMaterials = useComputed(() => {
+    return props.controller.materials.value.length > 0;
+  });
+
   /**
    * 回答默认工具栏
    *
@@ -217,7 +222,12 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
   }, [data?.state, data?.completed]);
 
   return (
-    <div className={`${ns.b()} ${ns.e(style)} ${className || ''}`}>
+    <div
+      className={`${ns.b()} ${ns.is(
+        'has-materials',
+        hasMaterials.value,
+      )} ${ns.e(style)} ${className || ''}`}
+    >
       {toolbarItems.map((item, index) => {
         if (hidden(item)) return;
         return (
diff --git a/src/components/chat-topic-item/chat-topic-item.scss b/src/components/chat-topic-item/chat-topic-item.scss
index ef4c245..464bcb6 100644
--- a/src/components/chat-topic-item/chat-topic-item.scss
+++ b/src/components/chat-topic-item/chat-topic-item.scss
@@ -2,9 +2,10 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: 38px;
+  height: 32px;
   padding: 0 8px;
   margin-top: 4px;
+  font-size: getCssVar(font-size, regular);
   cursor: pointer;
   border-radius: 8px;
 
-- 
Gitee