@lvce-editor/chat-view 1.4.0 → 1.6.0

package/dist/chatViewWorkerMain.js

@@ -972,9 +972,10 @@ const Span = 8;
 const Text = 12;
 const P = 50;
 const TextArea = 62;
-const Strong = 70;
 const Reference = 100;
 
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
 const Key = 'event.key';
 const ShiftKey = 'event.shiftKey';
 const TargetName = 'event.target.name';
@@ -983,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 = ({
@@ -1189,27 +1192,72 @@ const terminate = () => {
   globalThis.close();
 };
 
+const clearInput = async state => {
+  return {
+    ...state,
+    composerValue: ''
+  };
+};
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const chatTitle = i18nString('Chat');
+const chats = i18nString('Chats');
+const newChat = i18nString('New Chat');
+const backToChats = i18nString('Back to chats');
+const settings = i18nString('Settings');
+const closeChat = i18nString('Close Chat');
+const clickToOpenNewChat = i18nString('Click the + button to open a new chat.');
+const startConversation = i18nString('Start a conversation by typing below.');
+const you = i18nString('You');
+const assistant = i18nString('Assistant');
+const composePlaceholder = i18nString('Type your message. Enter to send, Shift+Enter for newline.');
+const sendMessage = i18nString('Send message');
+const send = i18nString('Send');
+const deleteChatSession = i18nString('Delete chat session');
+const defaultSessionTitle = i18nString('Chat 1');
+const dummyChatA = i18nString('Dummy Chat A');
+const dummyChatB = i18nString('Dummy Chat B');
+const dummyChatC = i18nString('Dummy Chat C');
+
 const createDefaultState = () => {
   const defaultSessionId = 'session-1';
   return {
     assetDir: '',
     composerValue: '',
     errorCount: 0,
-    ignoreNextInput: false,
+    focus: 'composer',
+    focused: false,
+    height: 0,
     initial: true,
+    inputSource: 'script',
     lastSubmittedSessionId: '',
+    listItemHeight: 40,
     nextMessageId: 1,
-    nextSessionId: 2,
     platform: 0,
     renamingSessionId: '',
     selectedSessionId: defaultSessionId,
     sessions: [{
       id: defaultSessionId,
       messages: [],
-      title: 'Chat 1'
+      title: defaultSessionTitle
     }],
     uid: 0,
-    warningCount: 0
+    viewMode: 'list',
+    warningCount: 0,
+    width: 0,
+    x: 0,
+    y: 0
   };
 };
 
@@ -1222,12 +1270,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);
 };
@@ -1236,16 +1288,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;
+  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 = [];
@@ -1271,117 +1339,186 @@ const getKeyBindings = () => {
   return [];
 };
 
-const submitRename = state => {
+const SESSION_PREFIX$1 = 'session:';
+const CHAT_LIST_ITEM_CONTEXT_MENU = 'ChatListItemContextMenu';
+const handleChatListContextMenu = async (name, x, y) => {
+  if (!name || !name.startsWith(SESSION_PREFIX$1)) {
+    return;
+  }
+  const sessionId = name.slice(SESSION_PREFIX$1.length);
+  // @ts-ignore
+  await invoke('ContextMenu.show', x, y, CHAT_LIST_ITEM_CONTEXT_MENU, sessionId);
+};
+
+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 {
-    composerValue,
     renamingSessionId,
     sessions
   } = state;
-  const title = composerValue.trim();
-  if (!renamingSessionId || !title) {
+  const filtered = sessions.filter(session => session.id !== id);
+  if (filtered.length === sessions.length) {
+    return state;
+  }
+  if (filtered.length === 0) {
     return {
       ...state,
-      renamingSessionId: ''
+      renamingSessionId: '',
+      selectedSessionId: '',
+      sessions: [],
+      viewMode: 'list'
     };
   }
-  const updatedSessions = sessions.map(session => {
-    if (session.id !== renamingSessionId) {
-      return session;
-    }
-    return {
-      ...session,
-      title
-    };
-  });
   return {
     ...state,
-    composerValue: '',
-    ignoreNextInput: true,
-    renamingSessionId: '',
-    sessions: updatedSessions
+    renamingSessionId: renamingSessionId === id ? '' : renamingSessionId,
+    selectedSessionId: getNextSelectedSessionId(filtered, id),
+    sessions: filtered
   };
 };
-const submitMessage = state => {
+
+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 handleSubmit = async state => {
   const {
     composerValue,
     nextMessageId,
     selectedSessionId,
-    sessions
+    sessions,
+    viewMode
   } = state;
-  const text = composerValue.trim();
-  if (!text) {
-    return {
-      ...state,
-      ignoreNextInput: true
+  const userText = composerValue.trim();
+  if (!userText) {
+    return state;
+  }
+  const userTime = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  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');
+  await delay(800);
+  const assistantTime = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  const assistantMessage = {
+    id: `message-${optimisticState.nextMessageId}`,
+    role: 'assistant',
+    text: getMockAiResponse(userText),
+    time: assistantTime
+  };
+  const updatedSessions = optimisticState.sessions.map(session => {
+    if (session.id !== optimisticState.selectedSessionId) {
       return session;
     }
-    const message = {
-      id: `message-${nextMessageId}`,
-      role: 'user',
-      text
-    };
     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 handleKeyDown = async (state, key, shiftKey) => {
-  if (key !== 'Enter' || shiftKey) {
-    return state;
-  }
-  if (state.renamingSessionId) {
-    return submitRename(state);
-  }
-  return submitMessage(state);
+  });
 };
 
-const CREATE_SESSION = 'create-session';
-const SESSION_PREFIX = 'session:';
-const RENAME_PREFIX = 'session-rename:';
-const DELETE_PREFIX = 'session-delete:';
-const SEND = 'send';
 const handleClickSend = async state => {
-  return handleKeyDown(state, 'Enter', false);
-};
-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 = `session-${state.nextSessionId}`;
-  const session = {
-    id,
-    messages: [],
-    title: `Chat ${state.nextSessionId}`
-  };
-  return {
+  const hasSelectedSession = state.sessions.some(session => session.id === state.selectedSessionId);
+  const submitState = state.viewMode === 'list' && hasSelectedSession ? {
     ...state,
-    nextSessionId: state.nextSessionId + 1,
-    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) {
@@ -1390,9 +1527,11 @@ const selectSession = (state, id) => {
   return {
     ...state,
     renamingSessionId: '',
-    selectedSessionId: id
+    selectedSessionId: id,
+    viewMode: 'detail'
   };
 };
+
 const startRename = (state, id) => {
   const session = state.sessions.find(item => item.id === id);
   if (!session) {
@@ -1401,38 +1540,47 @@ const startRename = (state, id) => {
   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 HEADER_HEIGHT = 40;
+const handleClickList = async (state, eventX, eventY) => {
+  const {
+    height,
+    listItemHeight,
+    sessions,
+    width,
+    x,
+    y
+  } = state;
+  if (eventX < x || eventY < y) {
     return state;
   }
-  if (filtered.length === 0) {
-    const fallbackId = `session-${state.nextSessionId}`;
-    const fallback = {
-      id: fallbackId,
-      messages: [],
-      title: `Chat ${state.nextSessionId}`
-    };
-    return {
-      ...state,
-      nextSessionId: state.nextSessionId + 1,
-      renamingSessionId: '',
-      selectedSessionId: fallbackId,
-      sessions: [fallback]
-    };
+  if (eventX >= x + width || eventY >= y + height) {
+    return state;
   }
-  return {
-    ...state,
-    renamingSessionId: state.renamingSessionId === id ? '' : state.renamingSessionId,
-    selectedSessionId: getNextSelectedSessionId(filtered, id),
-    sessions: filtered
-  };
+  const listY = eventY - y - HEADER_HEIGHT;
+  if (listY < 0) {
+    return state;
+  }
+  const itemHeight = listItemHeight > 0 ? listItemHeight : 40;
+  const index = Math.floor(listY / itemHeight);
+  const session = sessions[index];
+  if (!session) {
+    return state;
+  }
+  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;
   }
@@ -1447,8 +1595,7 @@ 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) {
@@ -1457,26 +1604,124 @@ const handleClick = async (state, name) => {
   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 handleClickDelete = async (state, sessionId = '') => {
+  return deleteSession(state, sessionId);
+};
+
+const handleClickNew = async state => {
+  return createSession(state);
+};
+
+const handleClickSettings = async () => {
+  // TODO
+};
+
+const handleInput = async (state, value, inputSource = 'user') => {
+  return {
+    ...state,
+    composerValue: value,
+    inputSource
+  };
 };
 
-const handleClickSettings = async () => {};
+const handleInputFocus = async (state, name) => {
+  if (name === 'composer') {
+    return focusInput(state);
+  }
+  if (name === 'send') {
+    return {
+      ...state,
+      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,
+    focused: false
+  };
+};
 
-const handleInput = async (state, value) => {
-  if (state.ignoreNextInput) {
+const submitRename = state => {
+  const {
+    composerValue,
+    renamingSessionId,
+    sessions
+  } = state;
+  const title = composerValue.trim();
+  if (!renamingSessionId || !title) {
     return {
       ...state,
-      ignoreNextInput: false
+      renamingSessionId: ''
     };
   }
+  const updatedSessions = sessions.map(session => {
+    if (session.id !== renamingSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      title
+    };
+  });
   return {
     ...state,
-    composerValue: value
+    composerValue: '',
+    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 (renamingSessionId) {
+    return submitRename(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;
 const sendMessagePortToExtensionHostWorker = async port => {
   await sendMessagePortToExtensionHostWorker$1(port, id);
@@ -1499,26 +1744,79 @@ const initialize = async () => {
   set$2(rpc);
 };
 
-const ensureSessions = state => {
-  if (state.sessions.length > 0) {
-    return state.sessions;
+const isObject = value => {
+  return typeof value === 'object' && value !== null;
+};
+
+const getSavedBounds = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
   }
-  const id = `session-${state.nextSessionId}`;
-  return [{
-    id,
-    messages: [],
-    title: `Chat ${state.nextSessionId}`
-  }];
+  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 loadContent = async state => {
-  const sessions = ensureSessions(state);
-  const selectedSessionId = sessions.some(session => session.id === state.selectedSessionId) ? state.selectedSessionId : sessions[0].id;
+
+const getSavedSelectedSessionId = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    selectedSessionId
+  } = savedState;
+  if (typeof selectedSessionId !== 'string') {
+    return undefined;
+  }
+  return selectedSessionId;
+};
+
+const getSavedSessions = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    sessions
+  } = savedState;
+  if (!Array.isArray(sessions)) {
+    return undefined;
+  }
+  return sessions;
+};
+
+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,
-    nextSessionId: state.sessions.length === 0 ? state.nextSessionId + 1 : state.nextSessionId,
     selectedSessionId,
-    sessions
+    sessions,
+    viewMode
   };
 };
 
@@ -1530,6 +1828,30 @@ 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(' ');
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -1827,168 +2149,261 @@ const diffTree = (oldNodes, newNodes) => {
 };
 
 const ChatActions = 'ChatActions';
+const ChatName = 'ChatName';
+const ChatSendArea = 'ChatSendArea';
+const Chat = 'Chat';
 const ChatHeader = 'ChatHeader';
 const Button = 'Button';
-const ChatDetails = 'ChatDetails';
-const ChatDetailsContent = 'ChatDetailsContent';
+const ButtonDisabled = 'ButtonDisabled';
+const ButtonPrimary = 'ButtonPrimary';
 const IconButton = 'IconButton';
 const Label = 'Label';
 const ChatList = 'ChatList';
+const ChatListItem = 'ChatListItem';
+const ChatListItemLabel = 'ChatListItemLabel';
 const Markdown = 'Markdown';
 const Message = 'Message';
 const MultilineInputBox = 'MultilineInputBox';
 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 getMessagesDom = messages => {
-  if (messages.length === 0) {
-    return [{
-      childCount: 1,
-      className: ChatWelcomeMessage,
-      type: Div
-    }, text('Start a conversation by typing below.')];
-  }
-  return messages.flatMap(message => {
-    return [{
-      childCount: 2,
-      className: Message,
-      type: Div
-    }, {
-      childCount: 1,
-      className: Label,
-      type: Strong
-    }, text(message.role === 'user' ? 'You' : 'Assistant'), {
-      childCount: 1,
-      className: Markdown,
-      type: P
-    }, text(message.text)];
-  });
-};
-
-const getSessionDom = (session, _selectedSessionId) => {
-  const sessionClassName = ChatList;
+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: sessionClassName,
+    className: ChatSendArea,
     type: Div
+  }, {
+    childCount: 0,
+    className: MultilineInputBox,
+    name: 'composer',
+    onInput: HandleInput,
+    placeholder: composePlaceholder,
+    rows: 4,
+    type: TextArea,
+    value: composerValue
   }, {
     childCount: 1,
-    className: Button,
-    name: `session:${session.id}`,
+    className: sendButtonClassName,
+    disabled: isSendDisabled,
+    name: 'send',
+    onClick: HandleSubmit,
     role: Button$2,
-    tabIndex: 0,
+    title: sendMessage,
     type: Button$1
-  }, text(session.title), {
-    childCount: 2,
-    className: ChatActions,
-    type: Div
-  }, {
+  }, text(send)];
+};
+
+const getHeaderActionVirtualDom = item => {
+  return [{
     childCount: 1,
     className: IconButton,
-    name: `session-rename:${session.id}`,
+    name: item.name,
+    onClick: item.onClick,
     role: Button$2,
-    tabIndex: 0,
-    title: 'Rename chat session',
+    title: item.title,
     type: Button$1
-  }, text('Rename'), {
+  }, 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
+  }];
+  return [{
+    childCount: items.length,
+    className: ChatActions,
+    type: Div
+  }, ...items.flatMap(getHeaderActionVirtualDom)];
+};
+
+const getChatHeaderBackButtonVirtualDom = () => {
+  return [{
     childCount: 1,
     className: IconButton,
-    name: `session-delete:${session.id}`,
+    name: 'back',
+    onClick: HandleClickBack,
     role: Button$2,
-    tabIndex: 0,
-    title: 'Delete chat session',
+    title: backToChats,
     type: Button$1
-  }, text('Delete')];
+  }, text('←')];
+};
+
+const getChatHeaderDomDetailMode = selectedSessionTitle => {
+  return [{
+    childCount: 2,
+    className: ChatHeader,
+    type: Div
+  }, {
+    childCount: 2,
+    className: ChatName,
+    type: Div
+  }, ...getChatHeaderBackButtonVirtualDom(), {
+    childCount: 1,
+    className: Label,
+    type: Span
+  }, text(selectedSessionTitle), ...getChatHeaderActionsDom()];
+};
+
+const getChatMessageDom = message => {
+  return [{
+    childCount: 2,
+    className: Message,
+    type: Div
+  }, {
+    childCount: 1,
+    className: Label,
+    type: Div
+  }, text(`${message.role === 'user' ? you : assistant} · ${message.time}`), {
+    childCount: 1,
+    className: Markdown,
+    type: P
+  }, text(message.text)];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue) => {
+const getMessagesDom = messages => {
+  if (messages.length === 0) {
+    return [{
+      childCount: 1,
+      className: ChatWelcomeMessage,
+      type: Div
+    }, text(startConversation)];
+  }
+  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 sessionNodes = sessions.flatMap(session => getSessionDom(session));
-  const messagesNodes = getMessagesDom(messages);
-  const dom = [{
+  return [{
     childCount: 3,
-    className: Viewlet + ' Chat',
-    onClick: HandleClick,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
+    className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, {
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue)];
+};
+
+const getChatHeaderListModeDom = () => {
+  return [{
     childCount: 2,
     className: ChatHeader,
     type: Div
-  }, {
-    childCount: 4,
-    className: ChatActions,
-    type: Div
   }, {
     childCount: 1,
     className: Label,
     type: Span
-  }, text('Chats'), {
-    childCount: 1,
-    className: IconButton,
-    name: 'create-session',
-    role: Button$2,
-    tabIndex: 0,
-    title: 'New Chat',
-    type: Button$1
-  }, text('+'), {
-    childCount: 1,
-    className: IconButton,
-    onClick: HandleClickSettings,
-    role: Button$2,
-    tabIndex: 0,
-    title: 'Settings',
-    type: Button$1
-  }, text('⚙'), {
+  }, text(chats), ...getChatHeaderActionsDom()];
+};
+
+const getEmptyChatSessionsDom = () => {
+  return [{
     childCount: 1,
-    className: IconButton,
-    onClick: HandleClickClose,
-    role: Button$2,
-    tabIndex: 0,
-    title: 'Close Chat',
-    type: Button$1
-  }, text('×'), {
-    childCount: sessions.length,
     className: ChatList,
     type: Div
-  }, ...sessionNodes, {
+  }, {
+    childCount: 1,
+    className: Label,
+    type: Div
+  }, text(clickToOpenNewChat)];
+};
+
+const getSessionDom = session => {
+  const sessionClassName = ChatListItem;
+  return [{
     childCount: 2,
-    className: ChatDetails,
+    className: sessionClassName,
     type: Div
   }, {
-    childCount: Math.max(messagesNodes.length, 0),
-    className: ChatDetailsContent,
+    childCount: 1,
+    className: ChatListItemLabel,
+    name: `session:${session.id}`,
+    onContextMenu: HandleContextMenu,
+    tabIndex: 0,
     type: Div
-  }, ...messagesNodes, {
-    childCount: 2,
+  }, text(session.title), {
+    childCount: 1,
     className: ChatActions,
     type: Div
-  }, {
-    childCount: 0,
-    className: MultilineInputBox,
-    name: 'composer',
-    placeholder: 'Type your message. Enter to send, Shift+Enter for newline.',
-    rows: 4,
-    type: TextArea,
-    value: composerValue
   }, {
     childCount: 1,
-    className: Button,
-    name: 'send',
+    className: IconButton,
+    'data-id': session.id,
+    name: 'SessionDelete',
+    onClick: HandleClickDelete,
     role: Button$2,
     tabIndex: 0,
-    title: 'Send message',
+    title: deleteChatSession,
     type: Button$1
-  }, text('Send')];
-  return dom;
+  }, text('🗑')];
+};
+
+const getChatListDom = (sessions, selectedSessionId) => {
+  if (sessions.length === 0) {
+    return getEmptyChatSessionsDom();
+  }
+  return [{
+    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
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue)];
+};
+
+const getChatModeUnsupportedVirtualDom = () => {
+  return [{
+    childCount: 1,
+    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, selectedSessionId, composerValue);
+    default:
+      return getChatModeUnsupportedVirtualDom();
+  }
 };
 
 const renderItems = (oldState, newState) => {
@@ -1997,12 +2412,13 @@ const renderItems = (oldState, newState) => {
     initial,
     selectedSessionId,
     sessions,
-    uid
+    uid,
+    viewMode
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode);
   return [SetDom2, uid, dom];
 };
 
@@ -2013,14 +2429,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');
   }
@@ -2050,23 +2477,55 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleContextMenu,
+    params: ['handleChatListContextMenu', TargetName, ClientX, ClientY],
+    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,
@@ -2077,59 +2536,76 @@ const resize = (state, dimensions) => {
 const saveState = state => {
   const {
     composerValue,
+    height,
     nextMessageId,
-    nextSessionId,
     renamingSessionId,
     selectedSessionId,
-    sessions
+    sessions,
+    viewMode,
+    width,
+    x,
+    y
   } = state;
   return {
     composerValue,
+    height,
     nextMessageId,
-    nextSessionId,
     renamingSessionId,
     selectedSessionId,
-    sessions
+    sessions,
+    viewMode,
+    width,
+    x,
+    y
   };
 };
 
 const dummySessions = [{
   id: 'session-a',
   messages: [],
-  title: 'Dummy Chat A'
+  title: dummyChatA
 }, {
   id: 'session-b',
   messages: [],
-  title: 'Dummy Chat B'
+  title: dummyChatB
 }, {
   id: 'session-c',
   messages: [],
-  title: 'Dummy Chat C'
+  title: dummyChatC
 }];
 const setChatList = state => {
   return {
     ...state,
-    nextSessionId: dummySessions.length + 1,
     selectedSessionId: dummySessions[0].id,
-    sessions: dummySessions
+    sessions: dummySessions,
+    viewMode: 'detail'
   };
 };
 
 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,
   'Chat.loadContent': wrapCommand(loadContent),
   '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.4.0",
+  "version": "1.6.0",
   "description": "Chat View Worker",
   "repository": {
     "type": "git",
@@ -11,6 +11,7 @@
   "type": "module",
   "main": "dist/chatViewWorkerMain.js",
   "dependencies": {
+    "@lvce-editor/i18n": "^2.1.0",
     "@lvce-editor/virtual-dom-worker": "^8.9.0"
   }
 }