diff --git a/src/components/chat-container/chat-container.scss b/src/components/chat-container/chat-container.scss
index 9054640172530af73a6974438202fe39b9f137cc..b9c7076979a499c77a399d5ff9b8f9a982a0ecf8 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 d9713dd57b09647a7baf30b723d7ba7e40f1239e..0dee3faf9ce13d8190dc5297a4757b0cea7ce640 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 5913189fc1a0c485b6675c58254b0e9e42868e11..2c038830c0b4eddf21b8bbde30ddc63a282ad521 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 0000000000000000000000000000000000000000..7889a7620c102f9c9d943c6587f4f790b85a196b
--- /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 c469d5a86dc312f28977acfa5009d6c7dbb99397..11fbb46ea584f2ed2eed832bdbd39e4228fcd6ea 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';