fix(ui): chat content do not change when agent changed

difizen · Aug 7, 2024 · 67dd424 · 67dd424
1 parent e545032
commit 67dd424
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 12 deletions.
diff --git a/web/platform/src/modules/chat/components/input/index.tsx b/web/platform/src/modules/chat/components/input/index.tsx
@@ -158,7 +158,7 @@ export const Input = forwardRef<TextAreaRef, InputProps>(function Input(
               ref={ref}
               value={value}
               placeholder={'输入聊天内容'}
-              bordered={false}
+              variant="borderless"
               autoSize={{ minRows: 1 }}
               style={{ resize: 'none', padding: '0px 16px', maxHeight: 80 }}
               onChange={onInputChange}

diff --git a/web/ui/src/modules/base-layout/index.less b/web/ui/src/modules/base-layout/index.less
@@ -25,7 +25,12 @@ body {
     }
   }
 
+  &-header {
+    z-index: 3;
+  }
+
   &-container {
     height: calc(100% - 61px);
+    z-index: 2;
   }
 }
diff --git a/web/ui/src/modules/chat-message/chat-message-model.ts b/web/ui/src/modules/chat-message/chat-message-model.ts
@@ -71,7 +71,7 @@ export class ChatMessageModel implements Disposable {
   };
 
   updateMeta = (option: MessageOption) => {
-    this.id = option.id;
+    this.id = option.id || dayjs().unix();
     this.agentId = option.agentId;
     this.sessionId = option.sessionId;
     if (option.messages && option.messages.length > 0) {

diff --git a/web/ui/src/modules/chat-message/protocol.ts b/web/ui/src/modules/chat-message/protocol.ts
@@ -79,7 +79,7 @@ export const toMessageOption = (msg: APIMessage, agentId: string): MessageOption
     items = JSON.parse(msg.content);
   }
   return {
-    id: msg.message_id,
+    id: msg.message_id || msg.id,
     sessionId: msg.session_id,
     agentId,
     messages: items.map(toMessageItem),

diff --git a/web/ui/src/views/agent-dev/chat-view.tsx b/web/ui/src/views/agent-dev/chat-view.tsx
@@ -32,9 +32,7 @@ const AgentChatComponent = forwardRef<HTMLDivElement>(
     instance.agentId = agentId;
 
     useEffect(() => {
-      if (instance.sessions?.active) {
-        instance.openChat(instance.sessions?.active);
-      }
+      instance.openChat(instance.sessions?.active);
     }, [instance, instance.sessions?.active]);
 
     return (
@@ -112,7 +110,11 @@ export class AgentView extends BaseView {
     this.initSessionView();
   }
 
-  openChat = async (session: SessionModel) => {
+  openChat = async (session?: SessionModel) => {
+    if (!session) {
+      this.chat = undefined;
+      return;
+    }
     const chatView = await this.viewManager.getOrCreateView(ChatView, {
       agentId: session.agentId,
       sessionId: session.id,

diff --git a/web/ui/src/views/chat/components/input/index.tsx b/web/ui/src/views/chat/components/input/index.tsx
@@ -158,7 +158,7 @@ export const Input = forwardRef<TextAreaRef, InputProps>(function Input(
               ref={ref}
               value={value}
               placeholder={'输入聊天内容'}
-              bordered={false}
+              variant="borderless"
               autoSize={{ minRows: 1 }}
               style={{ resize: 'none', padding: '0px 16px', maxHeight: 80 }}
               onChange={onInputChange}

diff --git a/web/ui/src/views/chat/index.less b/web/ui/src/views/chat/index.less
@@ -3,7 +3,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: var(--mana-input-background);
+  background-color: var(--mana-color-bg-container);
   box-sizing: border-box;
 
   &-content {

diff --git a/web/ui/src/views/chat/view.tsx b/web/ui/src/views/chat/view.tsx
@@ -1,4 +1,4 @@
-import { ClearOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { VerticalAlignBottomOutlined } from '@ant-design/icons';
 import {
   BaseView,
   Deferred,
@@ -11,7 +11,7 @@ import {
   ViewOption,
 } from '@difizen/mana-app';
 import { useInject } from '@difizen/mana-app';
-import { Button, FloatButton } from 'antd';
+import { FloatButton } from 'antd';
 import classnames from 'classnames';
 import type { RefObject } from 'react';
 import { useEffect, useRef } from 'react';

diff --git a/web/ui/src/views/sessions/view.tsx b/web/ui/src/views/sessions/view.tsx
@@ -58,6 +58,7 @@ export class SessionsView extends BaseView {
   agentId: string;
 
   option: SessionsViewOption;
+
   constructor(@inject(ViewOption) option: SessionsViewOption) {
     super();
     this.option = option;
@@ -92,7 +93,7 @@ export class SessionsView extends BaseView {
 
   protected disposeSession = (session: SessionModel) => {
     const sessions = this.sessions.filter((i) => i.id !== session.id);
-    if (this.active.id === session.id) {
+    if (this.active?.id === session.id) {
       if (sessions.length > 0) {
         this.active = sessions[0];
       } else {