fix: change chatbot background & message style

difizen · Nov 12, 2024 · dd2cb51 · dd2cb51
1 parent 648e7c4
commit dd2cb51
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 598 deletions.
diff --git a/web-packages/magent-chat/src/chat-view/components/input/icon.tsx b/web-packages/magent-chat/src/chat-view/components/input/icon.tsx
@@ -9,7 +9,6 @@ export const SendIcon: React.FC = () => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <title>发送-实色备份 2</title>
     <g id="techplay" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
       <g
         id="2.2开源大模型"
@@ -43,7 +42,6 @@ export const ImgIcon: React.FC = () => (
     xmlnsXlink="http://www.w3.org/1999/xlink"
     transform="translate(0, 3)"
   >
-    <title>Icon/01-Line/1-example</title>
     <defs>
       <path
         d="M16.875,0 L0.625,0 C0.279296875,0 0,0.279296875 0,0.625 L0,13.125 C0,13.4707031 0.279296875,13.75 0.625,13.75 L16.875,13.75 C17.2207031,13.75 17.5,13.4707031 17.5,13.125 L17.5,0.625 C17.5,0.279296875 17.2207031,0 16.875,0 Z M16.09375,12.34375 L1.40625,12.34375 L1.40625,11.5644531 L4.11132812,8.35546875 L7.04296875,11.8320312 L11.6035156,6.42578125 L16.09375,11.75 L16.09375,12.34375 Z M16.09375,9.80859375 L11.7226563,4.625 C11.6601562,4.55078125 11.546875,4.55078125 11.484375,4.625 L7.04296875,9.890625 L4.23046875,6.55664062 C4.16796875,6.48242188 4.0546875,6.48242188 3.9921875,6.55664062 L1.40625,9.62304688 L1.40625,1.40625 L16.09375,1.40625 L16.09375,9.80859375 Z M4.6875,5.78125 C5.63671875,5.78125 6.40625,5.01171875 6.40625,4.0625 C6.40625,3.11328125 5.63671875,2.34375 4.6875,2.34375 C3.73828125,2.34375 2.96875,3.11328125 2.96875,4.0625 C2.96875,5.01171875 3.73828125,5.78125 4.6875,5.78125 Z M4.70703125,3.45703125 C5.02057757,3.45703125 5.2734375,3.71425084 5.2734375,4.03320312 C5.2734375,4.35215541 5.02057757,4.609375 4.70703125,4.609375 C4.39348493,4.609375 4.140625,4.35215541 4.140625,4.03320312 C4.140625,3.71425084 4.39348493,3.45703125 4.70703125,3.45703125 Z"
@@ -81,7 +79,6 @@ export const AudioIcon: React.FC = () => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <title>5J音波,音频</title>
     <g
       id="techplay"
       stroke="none"
@@ -121,7 +118,6 @@ export const VideoIcon: React.FC = () => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <title>符号-视频</title>
     <g
       id="techplay"
       stroke="none"
@@ -165,7 +161,6 @@ export const FolderIcon: React.FC = () => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <title>folder</title>
     <g
       id="techplay"
       stroke="none"

diff --git a/web-packages/magent-chat/src/chat-view/components/message/index.less b/web-packages/magent-chat/src/chat-view/components/message/index.less
@@ -144,14 +144,24 @@
 
 .chat-message-human {
   background-color: #e6f4ff;
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 3%),
+    0 1px 6px -1px rgba(0, 0, 0, 2%),
+    0 2px 4px 0 rgba(0, 0, 0, 2%);
   border-radius: 8px;
 }
 
 .chat-message-ai {
-  background-color: #f8f8fb;
+  background-color: #fff;
   border-radius: 8px;
   width: 100%;
   border: 1px solid rgba(255, 255, 255, 0%);
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 3%),
+    0 1px 6px -1px rgba(0, 0, 0, 2%),
+    0 2px 4px 0 rgba(0, 0, 0, 2%);
+  color: rgba(0, 0, 0, 88%);
+  font-size: 14px;
 
   & > :first-child {
     width: 100%;

diff --git a/web-packages/magent-chat/src/chat-view/components/text/index.less b/web-packages/magent-chat/src/chat-view/components/text/index.less
@@ -7,9 +7,12 @@
   // flex: 1 1;
   overflow: hidden;
   max-width: 420px;
+  font-size: 14px;
 }
 
 .text-message-textPop {
   display: inline-block;
   padding: 12px 16px;
+  color: rgba(0, 0, 0, 88%);
+  word-break: break-word;
 }
diff --git a/web-packages/magent-chat/src/chat-view/index.less b/web-packages/magent-chat/src/chat-view/index.less
@@ -14,6 +14,9 @@
     flex-direction: column;
     font-size: 12px;
     box-sizing: border-box;
+    border-radius: 8px;
+    background: url('https://mdn.alipayobjects.com/huamei_je4oko/afts/img/A*RGzYTpUgRpcAAAAAAAAAAAAADsZ-AQ/original')
+      no-repeat center center/cover;
 
     &-list {
       overflow-y: auto;
@@ -34,8 +37,8 @@
     &-input {
       width: 100%;
       position: relative;
-      background-color: var(--mana-color-bg-container);
-      padding-top: 4px;
+      background-color: transparent;
+      padding-top: 16px;
 
       &-mask {
         height: 48px;
@@ -65,7 +68,7 @@
   }
 
   &-footer {
-    background-color: var(--mana-color-bg-container);
+    background-color: transparent;
     color: rgba(29, 28, 35, 35%);
     font-weight: 400;
     line-height: 16px;

diff --git a/web-packages/magent-chat/src/chat-view/view.tsx b/web-packages/magent-chat/src/chat-view/view.tsx
@@ -92,7 +92,7 @@ const DefaultInput = () => {
   const instance = useInject<ChatView>(ViewInstance);
   return (
     <>
-      <div className="chat-content-input-mask"></div>
+      {/* <div className="chat-content-input-mask"></div> */}
       <div className="chat-content-input-main">
         <Input onSubmit={(v) => instance.sendMessage(v)} />
       </div>