From 3592e7ddc12c1d745b12d286b0eb5fba667ca727 Mon Sep 17 00:00:00 2001
From: jianglinjun <JLJ05024111@163.com>
Date: Wed, 8 May 2024 19:22:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0=E6=8F=90=E9=97=AE?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  2 +
 src/components/chat-input/chat-input.tsx      |  1 -
 .../markdown-message/markdown-message.scss    | 21 ++++-
 .../markdown-message/markdown-message.tsx     | 21 +++--
 .../user-message/user-message.scss            | 84 +++++++++++++++++--
 .../user-message/user-message.tsx             | 23 ++++-
 src/controller/ai-chat/ai-chat.controller.ts  | 34 ++++++--
 7 files changed, 162 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e104bb7..4f1d36e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@
 
 ## [Unreleased]
 
+- 更新提问框样式
+
 ## [0.0.3] - 2024-05-07
 
 - 更新AI对话loading效果
diff --git a/src/components/chat-input/chat-input.tsx b/src/components/chat-input/chat-input.tsx
index 78c3453..0093379 100644
--- a/src/components/chat-input/chat-input.tsx
+++ b/src/components/chat-input/chat-input.tsx
@@ -74,7 +74,6 @@ export const ChatInput = (props: ChatInputProps) => {
       <textarea
         className={ns.e('textarea')}
         type='text'
-        wrap='off'
         rows={6}
         autoCorrect='off'
         autoCapitalize='off'
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 884f31a..5c159f8 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.scss
+++ b/src/components/chat-message-item/markdown-message/markdown-message.scss
@@ -51,12 +51,31 @@
     color: #{getCssVar('ai-chat', 'color')};
   }
 
-  @include e(action-item) {
+  @include e('action-item') {
+    width: 32px;
+    height: 32px;
     padding: 6px;
     margin-left: 6px;
+    overflow: hidden;
     font-size: 12px;
+    white-space: nowrap;
     border: 1px solid #{getCssVar('ai-chat', 'border-color')};
     border-radius: 15px;
+    transition: all 0.3s ease;
+
+    @include m('title'){
+      margin-left: 8px;
+      font-size: 14px;
+      vertical-align: middle;
+    }
+
+    svg{
+      vertical-align: baseline;
+    }
+
+    &:hover{
+      width: 68px;
+    }
 
     &:nth-child(1) {
       margin-left: 0;
diff --git a/src/components/chat-message-item/markdown-message/markdown-message.tsx b/src/components/chat-message-item/markdown-message/markdown-message.tsx
index 4011298..20e8fe3 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.tsx
+++ b/src/components/chat-message-item/markdown-message/markdown-message.tsx
@@ -73,33 +73,38 @@ export const MarkdownMessage = (props: MarkdownMessageProps) => {
       <div className={ns.b('header')}>
         <div className={ns.be('header', 'caption')}>AI </div>
         <div className={ns.b('header-action-wrapper')}>
-          <div
-            className={ns.be('header', 'action-item')}
-            title='回填'
-            onClick={onBackfill}
-          >
+          <div className={ns.be('header', 'action-item')} onClick={onBackfill}>
             <FillSvg />
+            <span className={ns.bem('header', 'action-item', 'title')}>
+              回填
+            </span>
           </div>
           <div
             className={ns.be('header', 'action-item')}
-            title='刷新'
             onClick={onRefreshMessage}
           >
             <RefreshSvg />
+            <span className={ns.bem('header', 'action-item', 'title')}>
+              刷新
+            </span>
           </div>
           <div
             className={ns.be('header', 'action-item')}
-            title='删除'
             onClick={onDeleteMessage}
           >
             <DeleteSvg />
+            <span className={ns.bem('header', 'action-item', 'title')}>
+              删除
+            </span>
           </div>
           <div
             className={ns.be('header', 'action-item')}
-            title='复制'
             onClick={onCopyMessage}
           >
             <CopySvg />
+            <span className={ns.bem('header', 'action-item', 'title')}>
+              复制
+            </span>
           </div>
         </div>
       </div>
diff --git a/src/components/chat-message-item/user-message/user-message.scss b/src/components/chat-message-item/user-message/user-message.scss
index bbf5b1f..5bf7507 100644
--- a/src/components/chat-message-item/user-message/user-message.scss
+++ b/src/components/chat-message-item/user-message/user-message.scss
@@ -1,11 +1,85 @@
-@include b(user-message) {
+@include b(user-message-question) {
   padding: 6px 10px;
-  text-align: right;
 
   @include e(content) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: end;
+    max-width: 100%;
+    padding: 10px;
+    font-size: 14px;
+    text-align: left;
+    word-break: break-word;
+    user-select: text;
+    transition: all .3s ease;
+    @include m('body'){
+      width: fit-content;
+      padding:0 10px;
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--color-fg-default);
+      word-wrap: break-word;
+      background: #E7F8FF;
+      border-radius: #{getCssVar('ai-chat', 'border-radius')};
+      text-size-adjust: 100%;
+
+      &::before{
+        display: table;
+        content: "";
+      }
+
+      &::after{
+        display: table;
+        clear: both;
+        content: "";
+      }
+
+      >p{
+        margin: 8px;
+      }
+    }
+  }
+
+  @include e('user-header'){
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    width: 100%;
+    height: 32px;
+  }
+  @include e('user-action'){
+    width: 32px;
+    height: 32px;
+    padding: 6px;
+    margin-right: 6px;
+    overflow: hidden;
+    font-size: 12px;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px solid #{getCssVar('ai-chat', 'border-color')};
+    border-radius: 15px;
+    transition: all 0.3s ease;
+
+    &:hover{
+      width: 68px;
+    }
+
+    @include m('title'){
+      margin-left: 8px;
+      font-size: 14px;
+      vertical-align: middle;
+    }
+
+    svg{
+      vertical-align: baseline;
+    }
+  }
+
+  @include e('user'){
     padding: 6px;
-    color: #fff;
-    background: linear-gradient(to right, #009fff, #ec2f4b);
-    border-radius: #{getCssVar('ai-chat', 'border-radius')};
+    font-size: 14px;
+    font-weight: 800;
   }
 }
diff --git a/src/components/chat-message-item/user-message/user-message.tsx b/src/components/chat-message-item/user-message/user-message.tsx
index f76a43c..e2c7307 100644
--- a/src/components/chat-message-item/user-message/user-message.tsx
+++ b/src/components/chat-message-item/user-message/user-message.tsx
@@ -2,8 +2,11 @@ import { useComputed } from '@preact/signals';
 import { IChatMessage } from '../../../interface';
 import { Namespace } from '../../../utils';
 import './user-message.scss';
+import { RefreshSvg } from '../../../icons';
+import { AiChatController } from '../../../controller';
 
 export interface UserMessageProps {
+  controller: AiChatController;
   message: IChatMessage;
   /**
    * 内容大小，用于更新绘制
@@ -15,13 +18,29 @@ export interface UserMessageProps {
   size: number;
 }
 
-const ns = new Namespace('user-message');
+const ns = new Namespace('user-message-question');
 
 export const UserMessage = (props: UserMessageProps) => {
   const content = useComputed(() => props.message.content);
+
+  const onRefreshMessage = () => {
+    props.controller.refreshMessage(props.message, true);
+  };
+
   return (
     <div className={ns.b()}>
-      <span className={ns.e('content')}>{content}</span>
+      <div className={ns.e('user-header')}>
+        <div className={ns.e('user-action')} onClick={onRefreshMessage}>
+          <RefreshSvg />
+          <span className={ns.em('user-action', 'title')}>刷新</span>
+        </div>
+        <div className={ns.e('user')}>我</div>
+      </div>
+      <div className={ns.e('content')}>
+        <div dir='auto' className={ns.em('content', 'body')}>
+          <p dir='auto'>{content}</p>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/controller/ai-chat/ai-chat.controller.ts b/src/controller/ai-chat/ai-chat.controller.ts
index 3dbe0af..d7f9d4c 100644
--- a/src/controller/ai-chat/ai-chat.controller.ts
+++ b/src/controller/ai-chat/ai-chat.controller.ts
@@ -125,9 +125,10 @@ export class AiChatController {
   }
 
   /**
-   * 删除指定消息
    *
+   * 删除指定消息，如果是用户提问的刷新调用的删除，则需要删除从问题开始到最后的所有记录
    * @param {IChatMessage} message
+   * @param {boolean} [isuser=false]
    * @memberof AiChatController
    */
   deleteMessage(message: IChatMessage): void {
@@ -145,13 +146,32 @@ export class AiChatController {
    *
    * @memberof AiChatController
    */
-  async refreshMessage(message: IChatMessage) {
-    this.deleteMessage(message);
-    await this.opts.question(
-      this.messages.value
-        .filter(item => item.type !== 'ERROR')
-        .map(item => item._origin),
+  async refreshMessage(message: IChatMessage, isuser: boolean = false) {
+    const i = this.messages.value.findIndex(
+      item => item.messageid === message.messageid,
     );
+
+    if (isuser) {
+      this.messages.value.splice(i + 1, this.messages.value.length - i - 1);
+      this.messages.value = [...this.messages.value];
+      await this.opts.question(
+        this.messages.value
+          .filter(item => item.type !== 'ERROR')
+          .map(item => item._origin),
+      );
+    } else if (i === this.messages.value.length - 1) {
+      this.messages.value.pop();
+      this.messages.value = [...this.messages.value];
+      await this.opts.question(
+        this.messages.value
+          .filter(item => item.type !== 'ERROR')
+          .map(item => item._origin),
+      );
+    } else {
+      const lastques = this.messages.value[i - 1].content;
+      this.messages.value.splice(i - 1, 2);
+      this.question(lastques);
+    }
   }
 
   /**
-- 
Gitee