From d915fcd61abf39330e3159af5cd608cf4d324bcc Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Wed, 22 Apr 2026 22:37:26 +0800
Subject: [PATCH] feat: add avatars for user and assistant in chat message list

---
 src/assets/images/ai_avatar.png         | Bin 0 -> 3653 bytes
 src/assets/images/me_avatar.png         | Bin 0 -> 1616 bytes
 src/components/chat/ChatMessageList.tsx | 220 ++++++++++++++++++------
 3 files changed, 168 insertions(+), 52 deletions(-)
 create mode 100644 src/assets/images/ai_avatar.png
 create mode 100644 src/assets/images/me_avatar.png

diff --git a/src/assets/images/ai_avatar.png b/src/assets/images/ai_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c577165b6a30ea5b2370863e469d99d5739b694
GIT binary patch
literal 3653
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
X3ShY{4>|sX00000NkvXXu0mjf^b9Q{

literal 0
HcmV?d00001

diff --git a/src/assets/images/me_avatar.png b/src/assets/images/me_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..8802f9440a04cb41911470482e2512efa2248f93
GIT binary patch
literal 1616
zcmYLI2~bm46pcm-g9TG`Fn|<9*#wnEgh{nZfFgp(R#~(n3Ml9Z5(K3RG-{zEsVpi|
z5J5#0F^-_2f+1{Lm7s>rtR%7}6vC2#VA6Q|KBeuQ``>&2+;i@|@6P|f1o(UF=^E?e
za5z1m9iBmG--10lcnq<y-HyX8b`9_g@j|aKZ&g*;#-2Yj1Rwx-Dgzln8y7}LVHAM%
z7Fc4Km;e?J6bg7Q1f>#~JQ({3%wCw71*QN-=AfPn^&(&))eJo2L6Zo^W)^4-0$>S1
zJ_T|l5kj*NCTF1$5zxwqX95_V#+XRR;=`yCSR!C@F$uyOk?<qNY2<-?8Vil1Bq*V9
zK7^2Y0$LFwpIHDgz5vFM9D#_#Ux*?hYI__tCcrwu`22b1N9=$=)B_SC0$K&5&^LzN
z0!#HT&YY)Vul$8_SP3LY6@?4J|I(t;|AbJ_i10s-<U(vj2>GX(h3NdC&_$Ziltj=X
zg4RB06T@>cyb!}55_l<r*Zt7m59|SWGYD^o;2rW|=p2SFDRfJr2e}M-W$=CkxFaAO
z1CboNMV}nR$j3n<hY#b>KLG>CCt+|BhNfV63Zx2<DPTkie=4!DqtT%|qV}d{K`{q2
zpI}xEb80v<kYj{Covh>_|6tsr#dy4ymbUiNrFwdL1Oj2j3PVE^6Em|lYc?TsadFwa
z*$o+)O!n}I*t<6-=J4T!#KgoCCz6tqQd3Xm&}f$~6&Dwml$4j3-?>Al(`##M84N~K
zQ&VeO+w<qIkhQl91VW)uES5+lgM))osRG&DoJyrutN%i#(P*rW8ztj#cy}L9_Yk7d
z^=4XR@b{~<CE{xZM`H3iOPHB$?3+0<np2m>(b(t*)%L}gH#xtqewA-^h%agQK^C*O
zy@vnul_yTdE?XJ|p9U8Hv~0GN!VsPMIw&rwo|KZNvG&g745TL{G#tf;56bv1gzOe`
z1Gjh569I=hX7#mNbI+g4Vg%#YixOT0v~rvMt$Si8_$Fl2a!noY-c{}0er0rS;xbzv
zUlr9{y2s>|uu;c8drr8P=SI9>$!VrV$5NKH)VSBtaw5(Kh8fO0$>Wsje9qdj?Lp1#
z_M4VUFJ?r~MQ2;R{H(FZ{k>5-{YB)Wja^IQvi*}ePEv~FHOnNDtBusap_nTm`;t5y
ze537zxAS*3*>~^q-G9M6^aFM02L0OBj>kvTM0RJ)29C4CMR}RluO1Fvy8Ft@nvcD7
z_bfGM2a!T;tfLI434xKs*wggOS>dNbmy0GXmUz)OX*XvU>|3OhOuy|xNDTaO33Xj)
z6`3F}+n-&v@18ElUqQZ2u{5>V_-XaJqzVhqbdr8xsa?nRX-69QvOPs>t5#sPIR`7|
zPR@-<-e6m~`qo!F`k(5q3`xqRb^5$C;OV;Fi(a0~^iH=~n-p`rOllA?S+H{F2=z_j
zm8C^)A<w3X-H$^W?}pw_bG*@A*6V8;Sj`Fh=IP?FTbUP2@L{*`CU@gfiAN2_*I4W(
z=td}tl`GTPu^FllXNE^@ZI*2H93)bAs6Y3Q3Aa^zvdej7SCJw8{CP+am%Tsr9o5v4
zxT_*#gQL&L!8DToxkn900+mtKzp2LSPTvVp4YaHbJDGbm`O*Qe;fDtI?@b^6!tOg#
zoKL&+^55f0kq1w9y!9KX;-*`#A5{@91{Ds6<12h^?Ts5R?BSZdpmy8W9@u<AYimkG
zk6CkJVUcAai#+J#6tBFlxe`9D4v(}m;t3}l+WS%jFOPL`DC~TSw`*Q>yWIerI#pPg
z%TDPEW>YH@7<ru<GryX8t8HoL<HJ+c%F1xl${S3IX-|sA^dYU**h*Y4jfj_wyZT>`
z%6G2pV@?>yAJZ_rBT1XzeEIFRk1fjuy#-#b$NN-GjcX<{UT`aKtm4hi^>(~>$!p2j
X#4R{0rv?w9{~PDy<?l%+AE5pX1d8<#

literal 0
HcmV?d00001

diff --git a/src/components/chat/ChatMessageList.tsx b/src/components/chat/ChatMessageList.tsx
index 157a3d1..a2fffd9 100644
--- a/src/components/chat/ChatMessageList.tsx
+++ b/src/components/chat/ChatMessageList.tsx
@@ -1,7 +1,10 @@
-import { memo, useEffect, useRef } from 'react';
+import { memo, useEffect, useState, useRef } from 'react';
+import { Check, ChevronRight, Copy, ImageIcon, Paperclip, Sparkles } from 'lucide-react';
 import type { ChatMessageItem } from './types';
 import { useI18n } from '../../i18n';
 import ChatEmptyState from './ChatEmptyState';
+import aiAvatar from '../../assets/images/ai_avatar.png';
+import meAvatar from '../../assets/images/me_avatar.png';
 
 type ChatMessageListProps = {
   messages: ChatMessageItem[];
@@ -9,6 +12,83 @@ type ChatMessageListProps = {
   showWelcomeState?: boolean;
 };
 
+function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(' ');
+}
+
+function AttachmentPreview({
+  messageRole,
+  attachment,
+}: {
+  messageRole: ChatMessageItem['role'];
+  attachment: NonNullable<ChatMessageItem['attachments']>[number];
+}) {
+  const isImage = attachment.mimeType.startsWith('image/');
+  const imageSizeClass = messageRole === 'user' ? 'h-24 w-24' : 'h-28 w-28';
+
+  if (isImage && attachment.preview) {
+    return (
+      <div className={cn(
+        'overflow-hidden rounded-[18px] border border-[#E1D8C9] bg-[#F3ECDD] shadow-[0_8px_18px_rgba(90,76,50,0.06)]',
+        'dark:border-white/10 dark:bg-white/5',
+      )}
+      >
+        <img
+          alt={attachment.fileName}
+          className={cn(imageSizeClass, 'object-cover')}
+          src={attachment.preview}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="inline-flex max-w-full items-center gap-2 rounded-full border border-[#DDD3C3] bg-[#F3ECDD] px-3 py-2 text-xs text-[#625A4D] shadow-[0_6px_14px_rgba(90,76,50,0.04)] dark:border-white/10 dark:bg-white/5 dark:text-gray-300">
+      {isImage ? <ImageIcon className="h-3.5 w-3.5 shrink-0" /> : <Paperclip className="h-3.5 w-3.5 shrink-0" />}
+      <span className="truncate">{attachment.fileName}</span>
+    </div>
+  );
+}
+
+function AssistantMeta({
+  content,
+  time,
+}: {
+  content: string;
+  time: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    if (!content.trim() || !navigator?.clipboard?.writeText) {
+      return;
+    }
+
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex w-full items-center justify-between px-1 text-xs text-[#1D2129] opacity-0 transition-opacity duration-200 group-hover:opacity-100 dark:text-gray-500">
+      <span>{time}</span>
+      {content.trim() ? (
+        <button
+          type="button"
+          className="inline-flex h-6 w-6 items-center justify-center rounded-full text-[#1D2129] transition-colors hover:bg-[#ECE3D3] hover:text-[#1F1F1F] dark:text-gray-500 dark:hover:bg-white/8 dark:hover:text-gray-200"
+          onClick={() => {
+            void handleCopy();
+          }}
+          aria-label="Copy response"
+          title="Copy response"
+        >
+          {copied ? <Check className="h-3.5 w-3.5 text-[#2B7FFF]" /> : <Copy className="h-3.5 w-3.5" />}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
 function ChatMessageList({ messages, loading, showWelcomeState }: ChatMessageListProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const { t } = useI18n();
@@ -18,13 +98,13 @@ function ChatMessageList({ messages, loading, showWelcomeState }: ChatMessageLis
     const container = containerRef.current;
     if (!container) return;
     container.scrollTop = container.scrollHeight;
-  }, [messages]);
+  }, [loading, messages]);
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden p-6">
-      <div ref={containerRef} className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto pr-1">
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden px-4 py-6 dark:bg-[#161618] sm:px-6">
+      <div ref={containerRef} className="mx-auto flex min-h-0 w-full flex-1 flex-col gap-5 overflow-y-auto pr-1">
         {loading ? (
-          <div className="rounded-[18px] border border-dashed border-[#BEDBFF] bg-[#EFF6FF] px-4 py-3 text-sm text-[#525866] dark:border-[#2a2a2d] dark:bg-[#1f1f22] dark:text-gray-400">
+          <div className="w-full rounded-[18px] border border-dashed border-[#DDD3C3] bg-[#EFE7D8] px-4 py-3 text-sm text-[#645C50] dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
             {t('conversation.messageList.loading')}
           </div>
         ) : null}
@@ -32,61 +112,97 @@ function ChatMessageList({ messages, loading, showWelcomeState }: ChatMessageLis
         {messages.map((message) => (
           <article
             key={message.id}
-            className={[
-              'flex gap-3 rounded-[18px] border p-4',
-              message.role === 'assistant'
-                ? 'border-[#E5E8EE] bg-[#f8fbff] dark:border-[#2a2a2d] dark:bg-[#1f1f22]'
-                : 'border-[#dfeaf6] bg-white dark:border-[#2a2a2d] dark:bg-[#232327]',
-            ].join(' ')}
+            className={cn(
+              'group flex w-full items-start gap-3',
+              message.role === 'user' ? 'justify-end' : 'justify-start',
+            )}
           >
-            <div className="flex h-10 w-10 flex-none items-center justify-center rounded-full bg-[#eff6ff] text-sm font-bold text-[#2B7FFF] dark:bg-[#222225]">
-              {message.role === 'assistant'
-                ? t('conversation.messageList.assistantBadge')
-                : t('conversation.messageList.userBadge')}
-            </div>
-
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center justify-between gap-3">
-                <div className="text-sm font-semibold text-[#171717] dark:text-gray-100">{message.name}</div>
-                <div className="text-xs text-[#99A0AE] dark:text-gray-500">{message.time}</div>
+            {message.role === 'assistant' ? (
+              <div className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-full">
+                <img className="h-full w-full object-cover" src={aiAvatar} alt="aiAvatar" />
               </div>
-              <p className="mt-2 whitespace-pre-wrap text-sm leading-7 text-[#525866] dark:text-gray-300">{message.content}</p>
-              {message.attachments && message.attachments.length > 0 ? (
-                <div className="mt-3 flex flex-wrap gap-2">
-                  {message.attachments.map((attachment, index) => {
-                    const attachmentKey = attachment.filePath || `${attachment.fileName}-${index}`;
-                    const isImage = attachment.mimeType.startsWith('image/') && Boolean(attachment.preview);
+            ) : null}
 
-                    if (isImage && attachment.preview) {
-                      return (
-                        <div
-                          key={attachmentKey}
-                          className="overflow-hidden rounded-xl border border-[#E5E8EE] bg-white dark:border-[#2a2a2d] dark:bg-[#232327]"
-                        >
-                          <img
-                            alt={attachment.fileName}
-                            className="h-24 w-24 object-cover"
-                            src={attachment.preview}
-                          />
-                        </div>
-                      );
-                    }
+            <div className={cn(
+              'min-w-0 flex flex-col gap-2',
+              message.role === 'user' ? 'max-w-[72%] items-end' : 'w-full max-w-[78%] items-start',
+            )}
+            >
+              {message.role === 'assistant' && message.isStreaming ? (
+                <>
+                  <div className="px-1 text-xs text-[#1D2129] dark:text-gray-500">
+                    {t('conversation.messageList.streaming')}
+                  </div>
+                  <button
+                    type="button"
+                    className="flex w-full items-center gap-2 rounded-lg border border-[#DDD3C3] bg-[#ECE3D3] px-4 py-2.5 text-left text-[13px] font-medium text-[#5F574A] shadow-[0_4px_14px_rgba(90,76,50,0.03)] dark:border-white/10 dark:bg-white/5 dark:text-gray-300"
+                  >
+                    <ChevronRight className="h-3.5 w-3.5 shrink-0" />
+                    <span>Thinking</span>
+                  </button>
+                </>
+              ) : null}
 
-                    return (
-                      <div
-                        key={attachmentKey}
-                        className="rounded-full border border-[#E5E8EE] px-3 py-1.5 text-xs text-[#525866] dark:border-[#2a2a2d] dark:text-gray-300"
-                      >
-                        {attachment.fileName}
-                      </div>
-                    );
-                  })}
+              {message.role === 'user' && message.attachments && message.attachments.length > 0 ? (
+                <div className="flex flex-wrap justify-end gap-2">
+                  {message.attachments.map((attachment, index) => (
+                    <AttachmentPreview
+                      key={attachment.filePath || `${attachment.fileName}-${index}`}
+                      attachment={attachment}
+                      messageRole={message.role}
+                    />
+                  ))}
                 </div>
               ) : null}
-              {message.isStreaming ? (
-                <div className="mt-3 text-xs text-[#2B7FFF]">{t('conversation.messageList.streaming')}</div>
+
+              {message.content ? (
+                <div
+                  className={cn(
+                    'max-w-full rounded-lg px-5 py-3.5 text-sm',
+                    message.role === 'user'
+                      ? 'bg-[#F7F8FA] text-[#1D2129]'
+                      : 'w-full border border-[#E1D8C9] text-[#1F1F1F] dark:border-white/10 dark:bg-white/5 dark:text-gray-100',
+                    message.isError
+                      ? 'border border-[#F3C7CB] bg-[#FFF2F3] text-[#B42318] dark:border-[#4B2229] dark:bg-[#2B1C1F] dark:text-[#FFB4BF]'
+                      : null,
+                  )}
+                >
+                  <p className={cn(
+                    'whitespace-pre-wrap break-words',
+                    message.role === 'user' ? 'leading-7' : 'leading-8',
+                  )}
+                  >
+                    {message.content}
+                  </p>
+                </div>
               ) : null}
+
+              {message.role === 'assistant' && message.attachments && message.attachments.length > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  {message.attachments.map((attachment, index) => (
+                    <AttachmentPreview
+                      key={attachment.filePath || `${attachment.fileName}-${index}`}
+                      attachment={attachment}
+                      messageRole={message.role}
+                    />
+                  ))}
+                </div>
+              ) : null}
+
+              {message.role === 'assistant' ? (
+                <AssistantMeta content={message.content} time={message.time} />
+              ) : (
+                <div className="px-1 text-xs text-[#1D2129] opacity-0 transition-opacity duration-200 group-hover:opacity-100 dark:text-gray-500">
+                  {message.time}
+                </div>
+              )}
             </div>
+
+            {message.role === 'user' ? (
+              <div className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-full">
+                <img className="h-full w-full object-cover" src={meAvatar} alt="meAvatar" />
+              </div>
+            ) : null}
           </article>
         ))}
       </div>