From ff78346b827042ea0849e1558e5887a7510b6f41 Mon Sep 17 00:00:00 2001
From: Cano1997 <1978141412@qq.com>
Date: Wed, 19 Mar 2025 20:26:27 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4ai=E5=BB=BA=E8=AE=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chat-container/chat-container.scss        |  6 +++++
 .../chat-suggestions/chat-suggestions.scss    | 25 +++++++++++++++++--
 .../chat-suggestions/chat-suggestions.tsx     | 12 ++++++---
 src/icons/chevron-forward-svg.tsx             | 17 +++++++++++++
 src/icons/index.ts                            |  1 +
 5 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/icons/chevron-forward-svg.tsx

diff --git a/src/components/chat-container/chat-container.scss b/src/components/chat-container/chat-container.scss
index 9054640..b9c7076 100644
--- a/src/components/chat-container/chat-container.scss
+++ b/src/components/chat-container/chat-container.scss
@@ -53,6 +53,7 @@ $ai-chat: (
 
   @include e(toolbar) {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     margin: 8px;
   }
@@ -130,12 +131,17 @@ $ai-chat: (
     position: absolute;
     bottom: 118px;
     left: 20px;
+    gap: 8px 16px;
     width: calc(100% - 40px);
+    min-height: 48px;
     margin: 0;
 
     &.is-has-materials {
       bottom: 180px;
     }
+    .#{bem(chat-toolbar, item)} {
+      margin: 0;
+    }
   }
   .#{bem(chat-messages)} {
     padding-bottom: 48px;
diff --git a/src/components/chat-suggestions/chat-suggestions.scss b/src/components/chat-suggestions/chat-suggestions.scss
index d9713dd..0dee3fa 100644
--- a/src/components/chat-suggestions/chat-suggestions.scss
+++ b/src/components/chat-suggestions/chat-suggestions.scss
@@ -13,19 +13,40 @@ $chat-suggestions: (
     width: 100%;
 
     @include e(item) {
-        padding: getCssVar(spacing, base, tight);
+        display: flex;
+        align-items: center;
+        align-self: flex-start;
+        justify-content: space-between;
+        min-width: 200px;
+        height: 32px;
+        padding: 0 12px;
         overflow: hidden;
+        line-height: 32px;
         text-overflow: ellipsis;
         white-space: nowrap;
         cursor: pointer;
         background-color: getCssVar(chat-suggestions, bg);
         border: 1px solid getCssVar(chat-suggestions, border);
-        border-radius: getCssVar(border, radius, large);
+        border-radius: 12px;
         transition: .3s background-color;
 
         &:hover {
             background-color: getCssVar(chat-suggestions, hover-bg-color);
         }
+
+        @include when(action) {
+            color: getCssVar(ai-chat, color, 2);
+            background-color: getCssVar(ai-chat, background, color, 2);
+
+            &:hover {
+                background-color: getCssVar(ai-chat, hover, background, color, 2);
+            }
+        }
+
+        .#{bem(chat-suggestions, item-icon)} {
+            margin-left: 12px;
+            font-size: 18px;
+        }
     }
 
 }
\ No newline at end of file
diff --git a/src/components/chat-suggestions/chat-suggestions.tsx b/src/components/chat-suggestions/chat-suggestions.tsx
index 5913189..2c03883 100644
--- a/src/components/chat-suggestions/chat-suggestions.tsx
+++ b/src/components/chat-suggestions/chat-suggestions.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { ChevronForwardSvg } from '../../icons';
 import { IChatSuggestion } from '../../interface';
 import { Namespace } from '../../utils';
 import './chat-suggestions.scss';
@@ -36,12 +37,15 @@ export const ChatSuggestions = (props: ChatSuggestionsProps) => {
         return (
           <div
             key={index}
-            className={`${ns.e('item')}`}
+            className={`${ns.e('item')} ${ns.is(
+              'action',
+              item.type === 'action',
+            )}`}
             onClick={(event: MouseEvent) => handleClick(item, event)}
+            title={(item.metadata as any).content_name}
           >
-            <span title={(item.metadata as any).content_name}>
-              {(item.metadata as any).content_name}
-            </span>
+            {(item.metadata as any).content_name}
+            <ChevronForwardSvg className={`${ns.e('item-icon')}`} />
           </div>
         );
       })}
diff --git a/src/icons/chevron-forward-svg.tsx b/src/icons/chevron-forward-svg.tsx
new file mode 100644
index 0000000..7889a76
--- /dev/null
+++ b/src/icons/chevron-forward-svg.tsx
@@ -0,0 +1,17 @@
+// 右箭头图标
+export const ChevronForwardSvg = (props: { className?: string }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    className={props.className}
+    viewBox='0 0 512 512'
+  >
+    <path
+      fill='none'
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='48'
+      d='M184 112l144 144-144 144'
+    />
+  </svg>
+);
diff --git a/src/icons/index.ts b/src/icons/index.ts
index c469d5a..11fbb46 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -26,3 +26,4 @@ export { ArrowDownOutlineSvg } from './arrow-down-outline-svg';
 export { ClearDialogueSvg } from './clear-dialogue-svg';
 export { ResetDialogueSvg } from './reset-dialogue-svg';
 export { RenameSvg } from './rename-svg';
+export { ChevronForwardSvg } from './chevron-forward-svg';
-- 
Gitee