feat(app): initialization of the user and bot in the chat

web/app/src/modules/agent-bot/agent-bot-manager.ts

@@ -9,6 +9,7 @@ import { AgentBotFactory } from './protocol.js';
 
 @singleton()
 export class AgentBotManager {
+  protected cache: Map<number, AgentBot> = new Map<number, AgentBot>();
   @inject(AgentBotFactory) botFactory: AgentBotFactory;
   @inject(UserManager) userManager: UserManager;
   @inject(AxiosClient) axios: AxiosClient;
@@ -52,7 +53,13 @@ export class AgentBotManager {
     return this.botFactory(res.data);
   };
 
-  getBot = async (options: AgentBotOption): Promise<AgentBot> => {
-    return this.botFactory(options);
+  getBot = (option: AgentBotOption): AgentBot => {
+    const exist = this.cache.get(option.id);
+    if (exist) {
+      return exist;
+    }
+    const bot = this.botFactory(option);
+    this.cache.set(bot.id, bot);
+    return bot;
   };
 }

web/app/src/modules/agent-bot/agent-bot.ts

@@ -1,4 +1,4 @@
-import { inject, prop, transient } from '@difizen/mana-app';
+import { Deferred, inject, prop, transient } from '@difizen/mana-app';
 
 import { AsyncModel } from '../../common/async-model.js';
 import { AxiosClient } from '../axios-client/index.js';
@@ -23,6 +23,12 @@ export class AgentBot extends AsyncModel<AgentBot, AgentBotOption> {
   @prop()
   draft?: AgentConfig;
 
+  protected draftDeferred = new Deferred<AgentConfig>();
+
+  get draftReady() {
+    return this.draftDeferred.promise;
+  }
+
   option: AgentBotOption;
 
   constructor(
@@ -52,11 +58,12 @@ export class AgentBot extends AsyncModel<AgentBot, AgentBotOption> {
       return this.draft;
     }
     let draftConfig = option.draft;
-    if (!this.option.draft) {
+    if (!draftConfig) {
       draftConfig = await this.fetchDraftInfo(option);
     }
     if (draftConfig) {
       this.draft = this.configManager.create(draftConfig);
+      this.draftDeferred.resolve(this.draft);
     }
     return this.draft;
   }

web/app/src/modules/chat/chat-message.ts

@@ -3,13 +3,16 @@ import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 
 import { AxiosClient } from '../axios-client/index.js';
+import { UserManager } from '../user/user-manager.js';
+import type { User } from '../user/user.js';
 
 import type { ChatEventChunk } from './protocol.js';
 import { ChatMessageOption, MessageSenderType, MessageType } from './protocol.js';
 
 @transient()
 export class ChatMessage {
   protected axios: AxiosClient;
+  protected userManager: UserManager;
   option: ChatMessageOption;
   senderId: number;
   senderType?: MessageSenderType;
@@ -22,12 +25,17 @@ export class ChatMessage {
   @prop()
   complete?: boolean = true;
 
+  @prop()
+  sender?: User;
+
   constructor(
     @inject(ChatMessageOption) option: ChatMessageOption,
     @inject(AxiosClient) axios: AxiosClient,
+    @inject(UserManager) userManager: UserManager,
   ) {
     this.option = option;
     this.axios = axios;
+    this.userManager = userManager;
     const {
       senderId,
       senderType = MessageSenderType.HUMAN,
@@ -47,6 +55,13 @@ export class ChatMessage {
     if (option.complete !== undefined) {
       this.complete = !!option.complete;
     }
+    this.getSender();
+  }
+
+  protected getSender() {
+    if (this.senderType === MessageSenderType.HUMAN && this.senderId) {
+      this.sender = this.userManager.getOrCreate({ id: this.senderId.toString() });
+    }
   }
 
   appendChunk(e: ChatEventChunk) {

web/app/src/modules/chat/chat.ts

@@ -4,6 +4,8 @@ import { EventSourceParserStream } from 'eventsource-parser/stream';
 import type { RefObject } from 'react';
 
 import { AsyncModel } from '../../common/async-model.js';
+import { AgentBotManager } from '../agent-bot/agent-bot-manager.js';
+import type { AgentBot } from '../agent-bot/protocol.js';
 import { AxiosClient } from '../axios-client/index.js';
 import { UserManager } from '../user/user-manager.js';
 
@@ -47,14 +49,18 @@ const msgModelToOption = (msg: ChatMessageModel): ChatMessageOption => {
 @transient()
 export class Chat extends AsyncModel<Chat, ChatOption> {
   @inject(UserManager) userManager: UserManager;
+  botManager: AgentBotManager;
   id?: number;
   messageManager: ChatMessageManager;
   axios: AxiosClient;
   option: ChatOption;
-  botId: string;
-  botConfigId?: string;
+  botId: number;
+  botConfigId?: number;
   createdBy?: string;
 
+  @prop()
+  bot?: AgentBot;
+
   @prop()
   messages: ChatMessage[] = [];
 
@@ -73,10 +79,12 @@ export class Chat extends AsyncModel<Chat, ChatOption> {
     @inject(ChatOption) option: ChatOption,
     @inject(AxiosClient) axios: AxiosClient,
     @inject(ChatMessageManager) messageManager: ChatMessageManager,
+    @inject(AgentBotManager) botManager: AgentBotManager,
   ) {
     super();
     this.axios = axios;
     this.messageManager = messageManager;
+    this.botManager = botManager;
     this.option = option;
     this.botId = option.botId;
     this.initialize(option);
@@ -85,6 +93,11 @@ export class Chat extends AsyncModel<Chat, ChatOption> {
   override shouldInitFromMeta(option: ChatOption): boolean {
     return false;
   }
+
+  protected getBot = async (botId: number) => {
+    this.bot = await this.botManager.getBot({ id: botId });
+  };
+
   override fetchInfo = async (option: ChatOption): Promise<void> => {
     const { env = 'debug' } = option;
     let url = `api/v1/chats/with_bot/${option.botId}/online`;
@@ -100,11 +113,12 @@ export class Chat extends AsyncModel<Chat, ChatOption> {
     const res = await this.axios.get<ChatModel>(url);
     if (res.status === 200) {
       const model = res.data;
-      this.botConfigId = model.bot_config_id.toString();
+      this.botConfigId = model.bot_config_id;
       this.createdBy = model.created_by.toString();
       this.messages = model.messages.map(this.getOrCreateMessage);
       this.id = model.id;
     }
+    this.getBot(option.botId);
     setImmediate(() => this.scrollToBottom(true));
   };
 

web/app/src/modules/chat/components/message/message.tsx

@@ -5,9 +5,7 @@ import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
 
-import type { AgentBot } from '../../../agent-bot/protocol.js';
-import { BotInstance } from '../../../agent-bot/protocol.js';
-import type { ChatMessage } from '../../protocol.js';
+import type { Chat, ChatMessage } from '../../protocol.js';
 import { ChatInstance, MessageSenderType } from '../../protocol.js';
 import Typing from '../typing/index.js';
 
@@ -18,15 +16,18 @@ interface MessageProps {
 }
 export const Message = (props: MessageProps) => {
   const message = useObserve(props.message);
-  const bot = useInject<AgentBot>(BotInstance);
-  const chat = useInject(ChatInstance);
+  const chat = useInject<Chat>(ChatInstance);
 
   const [contentHover, setContentHover] = useState<boolean>(false);
   let avatarSrc = 'https://api.dicebear.com/7.x/miniavs/svg?seed=1';
   let nickName = 'user';
-  if (message.senderType === MessageSenderType.AI) {
-    avatarSrc = bot.avatar!;
-    nickName = 'bot';
+  if (message.senderType === MessageSenderType.AI && chat.bot?.avatar) {
+    avatarSrc = chat.bot?.avatar;
+    nickName = chat.bot?.name;
+  }
+  if (message.senderType === MessageSenderType.HUMAN && message.sender?.avatar) {
+    avatarSrc = message.sender?.avatar;
+    nickName = message.sender.name;
   }
 
   let content: ReactNode = message.content;

web/app/src/modules/chat/manager.ts

@@ -12,11 +12,11 @@ export class ChatManager {
   @inject(UserManager) userManager: UserManager;
   @inject(AxiosClient) axios: AxiosClient;
 
-  getBotDebugChat = async (botId: string): Promise<Chat> => {
+  getBotDebugChat = async (botId: number): Promise<Chat> => {
     const user = await this.userManager.currentReady;
     const chat = await this.chatFactory({
       botId: botId,
-      userId: user.id,
+      userId: parseInt(user.id),
     });
     return chat;
   };

web/app/src/modules/chat/protocol.ts

@@ -23,8 +23,8 @@ export interface ChatMessageCreate {
 }
 
 export interface ChatOption {
-  botId: string;
-  userId: string;
+  botId: number;
+  userId: number;
   env?: 'debug' | 'online';
 }
 export const ChatOption = Syringe.defineToken('ChatOption');

web/app/src/modules/user/user-manager.ts

@@ -10,7 +10,7 @@ export class UserManager {
 
   @prop()
   current?: User;
-  protected userMap = new Map<string, User>();
+  protected cache = new Map<string, User>();
 
   protected initializedDefer = new Deferred<User>();
 
@@ -34,7 +34,7 @@ export class UserManager {
 
   getOrCreate(userMeta: UserMeta): User {
     if (userMeta.id) {
-      const exist = this.userMap.get(userMeta.id);
+      const exist = this.cache.get(userMeta.id);
       if (exist) {
         return exist;
       }
@@ -43,10 +43,12 @@ export class UserManager {
     if (!userMeta.id) {
       user.ready
         .then(() => {
-          this.userMap.set(user.id, user);
+          this.cache.set(user.id, user);
           return;
         })
         .catch(console.error);
+    } else {
+      this.cache.set(userMeta.id, user);
     }
     return user;
   }

web/app/src/pages/bot/bot-previewer/view.tsx

@@ -61,7 +61,7 @@ export class BotPreviewerView extends BaseView {
       return;
     }
     const bot = await this.botProvider.ready;
-    const chat = await this.chatManager.getBotDebugChat(bot.id.toString());
+    const chat = await this.chatManager.getBotDebugChat(bot.id);
     const context = this.viewManager.getViewContext(this);
     const child = context.container.createChild();
     child.register({ token: ChatInstance, useValue: chat });

web/app/src/pages/bot/model-selector/view.tsx

@@ -43,7 +43,7 @@ const ModelSelectorComponent = forwardRef<HTMLDivElement>(
       if (!modelMeta && defaultModel) {
         instance.botProvider.ready
           .then(async (bot) => {
-            await bot.ensureDraft();
+            await bot.draftReady;
             if (!bot.draft!.model) {
               instance.onSelectChange(defaultModel.key);
             }