@lvce-editor/chat-view 1.5.0 → 1.7.0

package/dist/chatViewWorkerMain.js

@@ -972,7 +972,6 @@ const Span = 8;
 const Text = 12;
 const P = 50;
 const TextArea = 62;
-const Strong = 70;
 const Reference = 100;
 
 const ClientX = 'event.clientX';
@@ -985,8 +984,10 @@ const TargetValue = 'event.target.value';
 const ExtensionHostWorker = 44;
 const RendererWorker = 1;
 
+const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
+const SetValueByName = 'Viewlet.setValueByName';
 const SetPatches = 'Viewlet.setPatches';
 
 const createMockRpc = ({
@@ -1191,6 +1192,13 @@ const terminate = () => {
   globalThis.close();
 };
 
+const clearInput = async state => {
+  return {
+    ...state,
+    composerValue: ''
+  };
+};
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1228,9 +1236,14 @@ const createDefaultState = () => {
     assetDir: '',
     composerValue: '',
     errorCount: 0,
-    ignoreNextInput: false,
+    focus: 'composer',
+    focused: false,
+    headerHeight: 50,
+    height: 0,
     initial: true,
+    inputSource: 'script',
     lastSubmittedSessionId: '',
+    listItemHeight: 40,
     nextMessageId: 1,
     platform: 0,
     renamingSessionId: '',
@@ -1242,7 +1255,10 @@ const createDefaultState = () => {
     }],
     uid: 0,
     viewMode: 'list',
-    warningCount: 0
+    warningCount: 0,
+    width: 0,
+    x: 0,
+    y: 0
   };
 };
 
@@ -1255,12 +1271,16 @@ const {
   wrapGetter
 } = create$1();
 
-const create = (uid, uri, x, y, width, height, platform, assetDir) => {
+const create = (uid, _uri, x, y, width, height, platform, assetDir) => {
   const state = {
     ...createDefaultState(),
     assetDir,
+    height,
     platform,
-    uid
+    uid,
+    width,
+    x,
+    y
   };
   set(uid, state, state);
 };
@@ -1269,16 +1289,32 @@ const isEqual$1 = (oldState, newState) => {
   return oldState.initial === newState.initial;
 };
 
+const diffFocus = (oldState, newState) => {
+  if (!newState.focused) {
+    return true;
+  }
+  return oldState.focus === newState.focus && oldState.focused === newState.focused;
+};
+
 const isEqual = (oldState, newState) => {
-  return oldState.composerValue === newState.composerValue && oldState.ignoreNextInput === newState.ignoreNextInput && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.viewMode === newState.viewMode;
+  return oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.viewMode === newState.viewMode;
 };
 
 const RenderItems = 4;
+const RenderFocus = 6;
+const RenderValue = 8;
 const RenderCss = 10;
 const RenderIncremental = 11;
 
-const modules = [isEqual, isEqual$1];
-const numbers = [RenderIncremental, RenderCss];
+const diffValue = (oldState, newState) => {
+  if (oldState.composerValue === newState.composerValue) {
+    return true;
+  }
+  return newState.inputSource !== 'script';
+};
+
+const modules = [isEqual, diffValue, diffFocus, isEqual$1];
+const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1319,83 +1355,180 @@ const generateSessionId = () => {
   return crypto.randomUUID();
 };
 
+const createSession = state => {
+  const id = generateSessionId();
+  const session = {
+    id,
+    messages: [],
+    title: `Chat ${state.sessions.length + 1}`
+  };
+  return {
+    ...state,
+    renamingSessionId: '',
+    selectedSessionId: id,
+    sessions: [...state.sessions, session]
+  };
+};
+
+const getNextSelectedSessionId = (sessions, deletedId) => {
+  if (sessions.length === 0) {
+    return '';
+  }
+  const index = sessions.findIndex(session => session.id === deletedId);
+  if (index === -1) {
+    return sessions[0].id;
+  }
+  const nextIndex = Math.min(index, sessions.length - 1);
+  return sessions[nextIndex].id;
+};
+
+const deleteSession = (state, id) => {
+  const {
+    renamingSessionId,
+    sessions
+  } = state;
+  const filtered = sessions.filter(session => session.id !== id);
+  if (filtered.length === sessions.length) {
+    return state;
+  }
+  if (filtered.length === 0) {
+    return {
+      ...state,
+      renamingSessionId: '',
+      selectedSessionId: '',
+      sessions: [],
+      viewMode: 'list'
+    };
+  }
+  return {
+    ...state,
+    renamingSessionId: renamingSessionId === id ? '' : renamingSessionId,
+    selectedSessionId: getNextSelectedSessionId(filtered, id),
+    sessions: filtered
+  };
+};
+
+const focusInput = state => {
+  return {
+    ...state,
+    focus: 'composer',
+    focused: true
+  };
+};
+
+const delay = async ms => {
+  await new Promise(resolve => setTimeout(resolve, ms));
+};
+const getMockAiResponse = userMessage => {
+  return `Mock AI response: I received "${userMessage}".`;
+};
+const getAiResponse = async (userText, nextMessageId) => {
+  await delay(800);
+  const assistantTime = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  return {
+    id: `message-${nextMessageId}`,
+    role: 'assistant',
+    text: getMockAiResponse(userText),
+    time: assistantTime
+  };
+};
+
 const handleSubmit = async state => {
   const {
     composerValue,
     nextMessageId,
     selectedSessionId,
-    sessions
+    sessions,
+    viewMode
   } = state;
-  const text = composerValue.trim();
-  const time = new Date().toLocaleTimeString([], {
+  const userText = composerValue.trim();
+  if (!userText) {
+    return state;
+  }
+  const userTime = new Date().toLocaleTimeString([], {
     hour: '2-digit',
     minute: '2-digit'
   });
-  if (!text) {
-    return {
-      ...state,
-      ignoreNextInput: true
+  const userMessage = {
+    id: `message-${nextMessageId}`,
+    role: 'user',
+    text: userText,
+    time: userTime
+  };
+  let optimisticState;
+  if (viewMode === 'list') {
+    const newSessionId = generateSessionId();
+    const newSession = {
+      id: newSessionId,
+      messages: [userMessage],
+      title: `Chat ${sessions.length + 1}`
     };
+    optimisticState = focusInput({
+      ...state,
+      composerValue: '',
+      inputSource: 'script',
+      lastSubmittedSessionId: newSessionId,
+      nextMessageId: nextMessageId + 1,
+      selectedSessionId: newSessionId,
+      sessions: [...sessions, newSession],
+      viewMode: 'detail'
+    });
+  } else {
+    const updatedSessions = sessions.map(session => {
+      if (session.id !== selectedSessionId) {
+        return session;
+      }
+      return {
+        ...session,
+        messages: [...session.messages, userMessage]
+      };
+    });
+    optimisticState = focusInput({
+      ...state,
+      composerValue: '',
+      inputSource: 'script',
+      lastSubmittedSessionId: selectedSessionId,
+      nextMessageId: nextMessageId + 1,
+      sessions: updatedSessions
+    });
   }
-  const updatedSessions = sessions.map(session => {
-    if (session.id !== selectedSessionId) {
+  set(state.uid, state, optimisticState);
+  // @ts-ignore
+  await invoke('Chat.rerender');
+  const assistantMessage = await getAiResponse(userText, optimisticState.nextMessageId);
+  const updatedSessions = optimisticState.sessions.map(session => {
+    if (session.id !== optimisticState.selectedSessionId) {
       return session;
     }
-    const message = {
-      id: `message-${nextMessageId}`,
-      role: 'user',
-      text,
-      time
-    };
     return {
       ...session,
-      messages: [...session.messages, message]
+      messages: [...session.messages, assistantMessage]
     };
   });
-  return {
-    ...state,
-    composerValue: '',
-    ignoreNextInput: true,
-    lastSubmittedSessionId: selectedSessionId,
-    nextMessageId: nextMessageId + 1,
+  return focusInput({
+    ...optimisticState,
+    nextMessageId: optimisticState.nextMessageId + 1,
     sessions: updatedSessions
-  };
+  });
 };
 
-const CREATE_SESSION = 'create-session';
-const SESSION_PREFIX = 'session:';
-const RENAME_PREFIX = 'session-rename:';
-const DELETE_PREFIX = 'session-delete:';
-const SEND = 'send';
-const BACK = 'back';
 const handleClickSend = async state => {
-  return handleSubmit(state);
-};
-const getNextSelectedSessionId = (sessions, deletedId) => {
-  if (sessions.length === 0) {
-    return '';
-  }
-  const index = sessions.findIndex(session => session.id === deletedId);
-  if (index === -1) {
-    return sessions[0].id;
-  }
-  const nextIndex = Math.min(index, sessions.length - 1);
-  return sessions[nextIndex].id;
-};
-const createSession = state => {
-  const id = generateSessionId();
-  const session = {
-    id,
-    messages: [],
-    title: `Chat ${state.sessions.length + 1}`
-  };
-  return {
+  const {
+    selectedSessionId,
+    sessions,
+    viewMode
+  } = state;
+  const hasSelectedSession = sessions.some(session => session.id === selectedSessionId);
+  const submitState = viewMode === 'list' && hasSelectedSession ? {
     ...state,
-    renamingSessionId: '',
-    selectedSessionId: id,
-    sessions: [...state.sessions, session]
-  };
+    viewMode: 'detail'
+  } : state;
+  return handleSubmit(submitState);
 };
+
 const selectSession = (state, id) => {
   const exists = state.sessions.some(session => session.id === id);
   if (!exists) {
@@ -1408,40 +1541,68 @@ const selectSession = (state, id) => {
     viewMode: 'detail'
   };
 };
+
 const startRename = (state, id) => {
-  const session = state.sessions.find(item => item.id === id);
+  const {
+    sessions
+  } = state;
+  const session = sessions.find(item => item.id === id);
   if (!session) {
     return state;
   }
   return {
     ...state,
     composerValue: session.title,
+    inputSource: 'script',
     renamingSessionId: id,
     selectedSessionId: id
   };
 };
-const deleteSession = (state, id) => {
-  const filtered = state.sessions.filter(session => session.id !== id);
-  if (filtered.length === state.sessions.length) {
+
+const getListIndex = (state, eventX, eventY) => {
+  const {
+    headerHeight,
+    height,
+    listItemHeight,
+    width,
+    x,
+    y
+  } = state;
+  if (eventX < x || eventY < y) {
+    return -1;
+  }
+  if (eventX >= x + width || eventY >= y + height) {
+    return -1;
+  }
+  const listY = eventY - y - headerHeight;
+  if (listY < 0) {
+    return -1;
+  }
+  const itemHeight = listItemHeight > 0 ? listItemHeight : 40;
+  return Math.floor(listY / itemHeight);
+};
+
+const handleClickList = async (state, eventX, eventY) => {
+  const {
+    sessions
+  } = state;
+  const index = getListIndex(state, eventX, eventY);
+  if (index < 0) {
     return state;
   }
-  if (filtered.length === 0) {
-    return {
-      ...state,
-      renamingSessionId: '',
-      selectedSessionId: '',
-      sessions: [],
-      viewMode: 'list'
-    };
+  const session = sessions[index];
+  if (!session) {
+    return state;
   }
-  return {
-    ...state,
-    renamingSessionId: state.renamingSessionId === id ? '' : state.renamingSessionId,
-    selectedSessionId: getNextSelectedSessionId(filtered, id),
-    sessions: filtered
-  };
+  return selectSession(state, session.id);
 };
-const handleClick = async (state, name) => {
+
+const CREATE_SESSION = 'create-session';
+const SESSION_PREFIX = 'session:';
+const RENAME_PREFIX = 'session-rename:';
+const SESSION_DELETE = 'SessionDelete';
+const SEND = 'send';
+const handleClick = async (state, name, id = '') => {
   if (!name) {
     return state;
   }
@@ -1456,40 +1617,76 @@ const handleClick = async (state, name) => {
     const id = name.slice(RENAME_PREFIX.length);
     return startRename(state, id);
   }
-  if (name.startsWith(DELETE_PREFIX)) {
-    const id = name.slice(DELETE_PREFIX.length);
+  if (name === SESSION_DELETE) {
     return deleteSession(state, id);
   }
   if (name === SEND) {
     return handleClickSend(state);
   }
-  if (name === BACK) {
-    return {
-      ...state,
-      renamingSessionId: '',
-      viewMode: 'list'
-    };
-  }
   return state;
 };
 
+const handleClickBack = async state => {
+  return {
+    ...state,
+    renamingSessionId: '',
+    viewMode: 'list'
+  };
+};
+
 const handleClickClose = async () => {
   // @ts-ignore
-  await invoke('Chat.terminate');
+  await invoke('Layout.hideSecondarySideBar');
 };
 
-const handleClickSettings = async () => {};
+const handleClickDelete = async (state, sessionId = '') => {
+  return deleteSession(state, sessionId);
+};
+
+const handleClickNew = async state => {
+  return createSession(state);
+};
 
-const handleInput = async (state, value) => {
-  if (state.ignoreNextInput) {
+const handleClickSettings = async () => {
+  // TODO
+};
+
+const handleInput = async (state, value, inputSource = 'user') => {
+  return {
+    ...state,
+    composerValue: value,
+    inputSource
+  };
+};
+
+const handleInputFocus = async (state, name) => {
+  if (name === 'composer') {
+    return focusInput(state);
+  }
+  if (name === 'send') {
     return {
       ...state,
-      ignoreNextInput: false
+      focus: 'send-button',
+      focused: true
+    };
+  }
+  if (name.startsWith('session:') || name === 'SessionDelete') {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true
+    };
+  }
+  if (name === 'create-session' || name === 'settings' || name === 'close-chat' || name === 'back') {
+    return {
+      ...state,
+      focus: 'header',
+      focused: true
     };
   }
   return {
     ...state,
-    composerValue: value
+    focused: false
   };
 };
 
@@ -1518,19 +1715,33 @@ const submitRename = state => {
   return {
     ...state,
     composerValue: '',
-    ignoreNextInput: true,
+    inputSource: 'script',
     renamingSessionId: '',
     sessions: updatedSessions
   };
 };
+
 const handleKeyDown = async (state, key, shiftKey) => {
+  const {
+    composerValue,
+    renamingSessionId,
+    selectedSessionId,
+    sessions,
+    viewMode
+  } = state;
   if (key !== 'Enter' || shiftKey) {
     return state;
   }
-  if (state.renamingSessionId) {
+  if (renamingSessionId) {
     return submitRename(state);
   }
-  return handleSubmit(state);
+  const hasInput = composerValue.trim().length > 0;
+  const hasSelectedSession = sessions.some(session => session.id === selectedSessionId);
+  const submitState = viewMode === 'list' && hasInput && hasSelectedSession ? {
+    ...state,
+    viewMode: 'detail'
+  } : state;
+  return handleSubmit(submitState);
 };
 
 const id = 7201;
@@ -1559,6 +1770,36 @@ const isObject = value => {
   return typeof value === 'object' && value !== null;
 };
 
+const getSavedBounds = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    height,
+    width,
+    x,
+    y
+  } = savedState;
+  if (typeof x !== 'number') {
+    return undefined;
+  }
+  if (typeof y !== 'number') {
+    return undefined;
+  }
+  if (typeof width !== 'number') {
+    return undefined;
+  }
+  if (typeof height !== 'number') {
+    return undefined;
+  }
+  return {
+    height,
+    width,
+    x,
+    y
+  };
+};
+
 const getSavedSelectedSessionId = savedState => {
   if (!isObject(savedState)) {
     return undefined;
@@ -1586,12 +1827,14 @@ const getSavedSessions = savedState => {
 };
 
 const loadContent = async (state, savedState) => {
+  const savedBounds = getSavedBounds(savedState);
   const sessions = getSavedSessions(savedState) || state.sessions;
   const preferredSessionId = getSavedSelectedSessionId(savedState) || state.selectedSessionId;
   const selectedSessionId = sessions.some(session => session.id === preferredSessionId) ? preferredSessionId : sessions[0]?.id || '';
   const viewMode = sessions.length === 0 ? 'list' : state.viewMode === 'detail' ? 'detail' : 'list';
   return {
     ...state,
+    ...savedBounds,
     initial: false,
     selectedSessionId,
     sessions,
@@ -1607,6 +1850,26 @@ const renderCss = (oldState, newState) => {
   return [SetCss, newState.uid, css];
 };
 
+const getFocusSelector = focus => {
+  switch (focus) {
+    case 'composer':
+    case 'input':
+      return '[name="composer"]';
+    case 'header':
+      return '[name="create-session"]';
+    case 'list':
+      return '[name^="session:"]';
+    case 'send-button':
+      return '[name="send"]';
+    default:
+      return '[name="composer"]';
+  }
+};
+const renderFocus = (oldState, newState) => {
+  const selector = getFocusSelector(newState.focus);
+  return [FocusSelector, selector];
+};
+
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
@@ -1913,13 +2176,13 @@ const ChatSendArea = 'ChatSendArea';
 const Chat = 'Chat';
 const ChatHeader = 'ChatHeader';
 const Button = 'Button';
+const ButtonDisabled = 'ButtonDisabled';
 const ButtonPrimary = 'ButtonPrimary';
-const ChatDetails = 'ChatDetails';
-const ChatDetailsContent = 'ChatDetailsContent';
 const IconButton = 'IconButton';
 const Label = 'Label';
 const ChatList = 'ChatList';
 const ChatListItem = 'ChatListItem';
+const ChatListItemLabel = 'ChatListItemLabel';
 const Markdown = 'Markdown';
 const Message = 'Message';
 const MultilineInputBox = 'MultilineInputBox';
@@ -1927,23 +2190,72 @@ const Viewlet = 'Viewlet';
 const ChatWelcomeMessage = 'ChatWelcomeMessage';
 
 const HandleContextMenu = 2;
+const HandleFocus = 3;
 const HandleInput = 4;
 const HandleClick = 11;
 const HandleKeyDown = 12;
 const HandleClickClose = 13;
 const HandleClickSettings = 14;
+const HandleClickNew = 15;
+const HandleClickBack = 16;
+const HandleClickList = 17;
+const HandleClickDelete = 18;
+const HandleSubmit = 19;
+
+const getChatSendAreaDom = composerValue => {
+  const isSendDisabled = composerValue.trim() === '';
+  const sendButtonClassName = isSendDisabled ? `${Button} ${ButtonPrimary} ${ButtonDisabled}` : `${Button} ${ButtonPrimary}`;
+  return [{
+    childCount: 2,
+    className: ChatSendArea,
+    type: Div
+  }, {
+    childCount: 0,
+    className: MultilineInputBox,
+    name: 'composer',
+    onInput: HandleInput,
+    placeholder: composePlaceholder,
+    rows: 4,
+    type: TextArea,
+    value: composerValue
+  }, {
+    childCount: 1,
+    className: sendButtonClassName,
+    disabled: isSendDisabled,
+    name: 'send',
+    onClick: HandleSubmit,
+    role: Button$2,
+    title: sendMessage,
+    type: Button$1
+  }, text(send)];
+};
+
+const getHeaderActionVirtualDom = item => {
+  return [{
+    childCount: 1,
+    className: IconButton,
+    name: item.name,
+    onClick: item.onClick,
+    role: Button$2,
+    title: item.title,
+    type: Button$1
+  }, text(item.icon)];
+};
 
 const getChatHeaderActionsDom = () => {
   const items = [{
     icon: '+',
     name: 'create-session',
+    onClick: HandleClickNew,
     title: newChat
   }, {
     icon: '⚙',
+    name: 'settings',
     onClick: HandleClickSettings,
     title: settings
   }, {
     icon: '×',
+    name: 'close-chat',
     onClick: HandleClickClose,
     title: closeChat
   }];
@@ -1951,24 +2263,7 @@ const getChatHeaderActionsDom = () => {
     childCount: items.length,
     className: ChatActions,
     type: Div
-  }, ...items.flatMap(item => {
-    const name = 'name' in item ? item.name : undefined;
-    const onClick = 'onClick' in item ? item.onClick : undefined;
-    return [{
-      childCount: 1,
-      className: IconButton,
-      ...(name ? {
-        name
-      } : {}),
-      ...(onClick ? {
-        onClick
-      } : {}),
-      role: Button$2,
-      tabIndex: 0,
-      title: item.title,
-      type: Button$1
-    }, text(item.icon)];
-  })];
+  }, ...items.flatMap(getHeaderActionVirtualDom)];
 };
 
 const getChatHeaderBackButtonVirtualDom = () => {
@@ -1976,8 +2271,8 @@ const getChatHeaderBackButtonVirtualDom = () => {
     childCount: 1,
     className: IconButton,
     name: 'back',
+    onClick: HandleClickBack,
     role: Button$2,
-    tabIndex: 0,
     title: backToChats,
     type: Button$1
   }, text('←')];
@@ -1999,46 +2294,6 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
   }, text(selectedSessionTitle), ...getChatHeaderActionsDom()];
 };
 
-const getChatDetailsDom = (selectedSessionTitle, messagesNodes, composerValue) => {
-  return [{
-    childCount: 3,
-    className: ChatDetails,
-    type: Div
-  }, {
-    childCount: 1,
-    className: Label,
-    type: Span
-  }, text(selectedSessionTitle), {
-    childCount: Math.max(messagesNodes.length, 0),
-    className: ChatDetailsContent,
-    type: Div
-  }, ...messagesNodes, {
-    childCount: 2,
-    className: ChatSendArea,
-    type: Div
-  }, {
-    childCount: 0,
-    className: MultilineInputBox,
-    name: 'composer',
-    placeholder: composePlaceholder,
-    rows: 4,
-    type: TextArea,
-    value: composerValue
-  }, {
-    childCount: 1,
-    className: Button + ' ' + ButtonPrimary,
-    name: 'send',
-    role: Button$2,
-    tabIndex: 0,
-    title: sendMessage,
-    type: Button$1
-  }, text(send)];
-};
-
-const getChatContentDom = (viewMode, sessionsLength, emptyStateNodes, sessionNodes, selectedSessionTitle, messagesNodes, composerValue) => {
-  return getChatDetailsDom(selectedSessionTitle, messagesNodes, composerValue);
-};
-
 const getChatMessageDom = message => {
   return [{
     childCount: 2,
@@ -2047,13 +2302,14 @@ const getChatMessageDom = message => {
   }, {
     childCount: 1,
     className: Label,
-    type: Strong
+    type: Div
   }, text(`${message.role === 'user' ? you : assistant} · ${message.time}`), {
     childCount: 1,
     className: Markdown,
     type: P
   }, text(message.text)];
 };
+
 const getMessagesDom = messages => {
   if (messages.length === 0) {
     return [{
@@ -2062,25 +2318,22 @@ const getMessagesDom = messages => {
       type: Div
     }, text(startConversation)];
   }
-  return messages.flatMap(message => {
-    return getChatMessageDom(message);
-  });
+  return [{
+    childCount: messages.length,
+    className: 'ChatMessages',
+    type: Div
+  }, ...messages.flatMap(getChatMessageDom)];
 };
 
 const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle;
   const messages = selectedSession ? selectedSession.messages : [];
-  const messagesNodes = getMessagesDom(messages);
-  const contentNodes = getChatContentDom('detail', sessions.length, [], [], selectedSessionTitle, messagesNodes, composerValue);
   return [{
-    childCount: 2,
-    className: Viewlet + ' Chat',
-    onClick: HandleClick,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
+    childCount: 3,
+    className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...contentNodes];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -2095,18 +2348,19 @@ const getChatHeaderListModeDom = () => {
   }, text(chats), ...getChatHeaderActionsDom()];
 };
 
-const getEmptyChatSessionsDom = sessionsLength => {
-  if (sessionsLength !== 0) {
-    return [];
-  }
+const getEmptyChatSessionsDom = () => {
   return [{
+    childCount: 1,
+    className: ChatList,
+    type: Div
+  }, {
     childCount: 1,
     className: Label,
     type: Div
   }, text(clickToOpenNewChat)];
 };
 
-const getSessionDom = (session, _selectedSessionId) => {
+const getSessionDom = session => {
   const sessionClassName = ChatListItem;
   return [{
     childCount: 2,
@@ -2114,7 +2368,7 @@ const getSessionDom = (session, _selectedSessionId) => {
     type: Div
   }, {
     childCount: 1,
-    className: ChatName,
+    className: ChatListItemLabel,
     name: `session:${session.id}`,
     onContextMenu: HandleContextMenu,
     tabIndex: 0,
@@ -2126,7 +2380,9 @@ const getSessionDom = (session, _selectedSessionId) => {
   }, {
     childCount: 1,
     className: IconButton,
-    name: `session-delete:${session.id}`,
+    'data-id': session.id,
+    name: 'SessionDelete',
+    onClick: HandleClickDelete,
     role: Button$2,
     tabIndex: 0,
     title: deleteChatSession,
@@ -2134,21 +2390,24 @@ const getSessionDom = (session, _selectedSessionId) => {
   }, text('🗑')];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId) => {
-  const sessionNodes = sessions.flatMap(session => getSessionDom(session));
-  const emptyStateNodes = getEmptyChatSessionsDom(sessions.length);
+const getChatListDom = (sessions, selectedSessionId) => {
+  if (sessions.length === 0) {
+    return getEmptyChatSessionsDom();
+  }
   return [{
-    childCount: 2,
-    className: mergeClassNames(Viewlet, Chat),
-    onClick: HandleClick,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
-    type: Div
-  }, ...getChatHeaderListModeDom(), {
-    childCount: sessions.length === 0 ? 1 : sessions.length,
+    childCount: sessions.length,
     className: ChatList,
+    onClick: HandleClickList,
+    type: Div
+  }, ...sessions.flatMap(getSessionDom)];
+};
+
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue) => {
+  return [{
+    childCount: 3,
+    className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...(sessions.length === 0 ? emptyStateNodes : sessionNodes)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -2157,12 +2416,13 @@ const getChatModeUnsupportedVirtualDom = () => {
     type: Div
   }, text('Unknown view mode')];
 };
+
 const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode) => {
   switch (viewMode) {
     case 'detail':
       return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue);
     case 'list':
-      return getChatModeListVirtualDom(sessions);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -2191,14 +2451,25 @@ const renderIncremental = (oldState, newState) => {
   return [SetPatches, newState.uid, patches];
 };
 
+const renderValue = (oldState, newState) => {
+  const {
+    composerValue
+  } = newState;
+  return [SetValueByName, newState.uid, 'composer', composerValue];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderCss:
       return renderCss;
+    case RenderFocus:
+      return renderFocus;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
       return renderItems;
+    case RenderValue:
+      return renderValue;
     default:
       throw new Error('unknown renderer');
   }
@@ -2233,22 +2504,50 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandleClick,
-    params: ['handleClick', TargetName]
+    params: ['handleClick', TargetName, 'event.target.dataset.id']
+  }, {
+    name: HandleClickDelete,
+    params: ['handleClickDelete', 'event.target.dataset.id']
   }, {
     name: HandleClickClose,
     params: ['handleClickClose']
   }, {
     name: HandleClickSettings,
     params: ['handleClickSettings']
+  }, {
+    name: HandleClickNew,
+    params: ['handleClickNew']
+  }, {
+    name: HandleClickBack,
+    params: ['handleClickBack']
+  }, {
+    name: HandleClickList,
+    params: ['handleClickList', ClientX, ClientY]
   }, {
     name: HandleInput,
     params: ['handleInput', TargetValue]
+  }, {
+    name: HandleFocus,
+    params: ['handleInputFocus', TargetName]
   }, {
     name: HandleKeyDown,
     params: ['handleKeyDown', Key, ShiftKey]
+  }, {
+    name: HandleSubmit,
+    params: ['handleSubmit']
   }];
 };
 
+const reset = async state => {
+  return {
+    ...state,
+    composerValue: '',
+    selectedSessionId: '',
+    sessions: [],
+    viewMode: 'list'
+  };
+};
+
 const resize = (state, dimensions) => {
   return {
     ...state,
@@ -2259,19 +2558,27 @@ const resize = (state, dimensions) => {
 const saveState = state => {
   const {
     composerValue,
+    height,
     nextMessageId,
     renamingSessionId,
     selectedSessionId,
     sessions,
-    viewMode
+    viewMode,
+    width,
+    x,
+    y
   } = state;
   return {
     composerValue,
+    height,
     nextMessageId,
     renamingSessionId,
     selectedSessionId,
     sessions,
-    viewMode
+    viewMode,
+    width,
+    x,
+    y
   };
 };
 
@@ -2298,15 +2605,21 @@ const setChatList = state => {
 };
 
 const commandMap = {
+  'Chat.clearInput': wrapCommand(clearInput),
   'Chat.create': create,
   'Chat.diff2': diff2,
   'Chat.getCommandIds': getCommandIds,
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.handleChatListContextMenu': handleChatListContextMenu,
   'Chat.handleClick': wrapCommand(handleClick),
+  'Chat.handleClickBack': wrapCommand(handleClickBack),
   'Chat.handleClickClose': handleClickClose,
+  'Chat.handleClickDelete': wrapCommand(handleClickDelete),
+  'Chat.handleClickList': wrapCommand(handleClickList),
+  'Chat.handleClickNew': wrapCommand(handleClickNew),
   'Chat.handleClickSettings': handleClickSettings,
   'Chat.handleInput': wrapCommand(handleInput),
+  'Chat.handleInputFocus': wrapCommand(handleInputFocus),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
   'Chat.handleSubmit': wrapCommand(handleSubmit),
   'Chat.initialize': initialize,
@@ -2314,6 +2627,7 @@ const commandMap = {
   'Chat.loadContent2': wrapCommand(loadContent),
   'Chat.render2': render2,
   'Chat.renderEventListeners': renderEventListeners,
+  'Chat.reset': wrapCommand(reset),
   'Chat.resize': wrapCommand(resize),
   'Chat.saveState': wrapGetter(saveState),
   'Chat.setChatList': wrapCommand(setChatList),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-view",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Chat View Worker",
   "repository": {
     "type": "git",