@lvce-editor/chat-view 1.0.0 → 1.2.0

package/dist/chatViewWorkerMain.js

@@ -486,7 +486,7 @@ const execute = (command, ...args) => {
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const get$3 = id => {
+const get$2 = id => {
   return callbacks[id];
 };
 const remove$1 = id => {
@@ -635,7 +635,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$3(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -964,18 +964,21 @@ const create$3 = async ({
   return rpc;
 };
 
-const Button$1 = 'button';
-const Status = 'status';
-
-const MaskIcon = 'MaskIcon';
+const Button$2 = 'button';
 
-const Button = 1;
+const Button$1 = 1;
 const Div = 4;
 const Span = 8;
 const Text = 12;
+const P = 50;
+const TextArea = 62;
+const Strong = 70;
 const Reference = 100;
 
+const Key = 'event.key';
+const ShiftKey = 'event.shiftKey';
 const TargetName = 'event.target.name';
+const TargetValue = 'event.target.value';
 
 const ExtensionHostWorker = 44;
 const RendererWorker = 1;
@@ -1007,7 +1010,7 @@ const rpcs = Object.create(null);
 const set$3 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get$2 = id => {
+const get$1 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1018,18 +1021,18 @@ const remove = id => {
 const create$2 = rpcId => {
   return {
     async dispose() {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1052,12 +1055,10 @@ const create$2 = rpcId => {
 };
 
 const {
-  invoke: invoke$1,
   set: set$2
 } = create$2(ExtensionHostWorker);
 
 const {
-  invoke,
   invokeAndTransfer,
   set: set$1
 } = create$2(RendererWorker);
@@ -1065,12 +1066,6 @@ const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
 };
-const activateByEvent$1 = (event, assetDir, platform) => {
-  return invoke('ExtensionHostManagement.activateByEvent', event, assetDir, platform);
-};
-const getPreference = async key => {
-  return await invoke('Preferences.get', key);
-};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1192,8 +1187,32 @@ const terminate = () => {
   globalThis.close();
 };
 
+const createDefaultState = () => {
+  const defaultSessionId = 'session-1';
+  return {
+    assetDir: '',
+    composerValue: '',
+    errorCount: 0,
+    ignoreNextInput: false,
+    initial: true,
+    lastSubmittedSessionId: '',
+    nextMessageId: 1,
+    nextSessionId: 2,
+    platform: 0,
+    renamingSessionId: '',
+    selectedSessionId: defaultSessionId,
+    sessions: [{
+      id: defaultSessionId,
+      messages: [],
+      title: 'Chat 1'
+    }],
+    uid: 0,
+    warningCount: 0
+  };
+};
+
 const {
-  get: get$1,
+  get,
   getCommandIds,
   registerCommands,
   set,
@@ -1203,20 +1222,16 @@ const {
 
 const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
+    ...createDefaultState(),
     assetDir,
-    errorCount: 0,
-    initial: true,
     platform,
-    statusBarItemsLeft: [],
-    statusBarItemsRight: [],
-    uid,
-    warningCount: 0
+    uid
   };
   set(uid, state, state);
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.statusBarItemsLeft === newState.statusBarItemsLeft && oldState.statusBarItemsRight === newState.statusBarItemsRight;
+  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;
 };
 
 const RenderItems = 4;
@@ -1240,325 +1255,252 @@ const diff2 = uid => {
   const {
     newState,
     oldState
-  } = get$1(uid);
+  } = get(uid);
   const result = diff(oldState, newState);
   return result;
 };
 
-const getMatchingItem = (itemsLeft, itemsRight, name) => {
-  for (const item of itemsLeft) {
-    if (item.name === name) {
-      return item;
-    }
+const getKeyBindings = () => {
+  return [];
+};
+
+const CREATE_SESSION = 'create-session';
+const SESSION_PREFIX = 'session:';
+const RENAME_PREFIX = 'session-rename:';
+const DELETE_PREFIX = 'session-delete:';
+const getNextSelectedSessionId = (sessions, deletedId) => {
+  if (sessions.length === 0) {
+    return '';
   }
-  for (const item of itemsRight) {
-    if (item.name === name) {
-      return item;
-    }
+  const index = sessions.findIndex(session => session.id === deletedId);
+  if (index === -1) {
+    return sessions[0].id;
   }
-  return undefined;
+  const nextIndex = Math.min(index, sessions.length - 1);
+  return sessions[nextIndex].id;
 };
-
-const handleClickExtensionStatusBarItem = async name => {
-  // @ts-ignore
-  await invoke$1(`ExtensionHostStatusBar.executeCommand`, name);
+const createSession = state => {
+  const id = `session-${state.nextSessionId}`;
+  const session = {
+    id,
+    messages: [],
+    title: `Chat ${state.nextSessionId}`
+  };
+  return {
+    ...state,
+    nextSessionId: state.nextSessionId + 1,
+    renamingSessionId: '',
+    selectedSessionId: id,
+    sessions: [...state.sessions, session]
+  };
 };
-
-const handleClickNotification = async () => {
-  // TODO toggle notifications
+const selectSession = (state, id) => {
+  const exists = state.sessions.some(session => session.id === id);
+  if (!exists) {
+    return state;
+  }
+  return {
+    ...state,
+    renamingSessionId: '',
+    selectedSessionId: id
+  };
 };
-
-const handleClickProblems = async () => {
-  // @ts-ignore
-  await invoke('Layout.showPanel');
-  // @ts-ignore
-  await invoke('Panel.toggleView', 'Problems');
+const startRename = (state, id) => {
+  const session = state.sessions.find(item => item.id === id);
+  if (!session) {
+    return state;
+  }
+  return {
+    ...state,
+    composerValue: session.title,
+    renamingSessionId: id,
+    selectedSessionId: id
+  };
+};
+const deleteSession = (state, id) => {
+  const filtered = state.sessions.filter(session => session.id !== id);
+  if (filtered.length === state.sessions.length) {
+    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]
+    };
+  }
+  return {
+    ...state,
+    renamingSessionId: state.renamingSessionId === id ? '' : state.renamingSessionId,
+    selectedSessionId: getNextSelectedSessionId(filtered, id),
+    sessions: filtered
+  };
 };
-
-const Notifications = 'Notifications';
-const Problems = 'Problems';
-
 const handleClick = async (state, name) => {
   if (!name) {
     return state;
   }
-  const {
-    statusBarItemsLeft,
-    statusBarItemsRight
-  } = state;
-  const item = getMatchingItem(statusBarItemsLeft, statusBarItemsRight, name);
-  if (!item) {
-    return state;
+  if (name === CREATE_SESSION) {
+    return createSession(state);
   }
-  if (item.name === Notifications) {
-    await handleClickNotification();
-  } else if (item.name === Problems) {
-    await handleClickProblems();
-  } else {
-    await handleClickExtensionStatusBarItem(name);
+  if (name.startsWith(SESSION_PREFIX)) {
+    const id = name.slice(SESSION_PREFIX.length);
+    return selectSession(state, id);
   }
-  // TODO
-  // sendExtensionWorker([/* statusBarItemHandleClick */ 7657, /* name */ name])
-  return state;
-};
-
-const id = 7201;
-const sendMessagePortToExtensionHostWorker = async port => {
-  await sendMessagePortToExtensionHostWorker$1(port, id);
-};
-
-const createExtensionHostRpc = async () => {
-  try {
-    const rpc = await create$4({
-      commandMap: {},
-      send: sendMessagePortToExtensionHostWorker
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension host rpc`);
+  if (name.startsWith(RENAME_PREFIX)) {
+    const id = name.slice(RENAME_PREFIX.length);
+    return startRename(state, id);
   }
-};
-
-const initialize = async () => {
-  const rpc = await createExtensionHostRpc();
-  set$2(rpc);
-};
-
-const getIndex = (items, item) => {
-  for (let i = 0; i < items.length; i++) {
-    if (items[i].name === item.name) {
-      return i;
-    }
+  if (name.startsWith(DELETE_PREFIX)) {
+    const id = name.slice(DELETE_PREFIX.length);
+    return deleteSession(state, id);
   }
-  return -1;
-};
-
-const updateArray = (items, newItem) => {
-  const index = getIndex(items, newItem);
-  const before = items.slice(0, index);
-  const after = items.slice(index + 1);
-  return [...before, newItem, ...after];
+  return state;
 };
 
-const itemLeftUpdate = (state, newItem) => {
+const handleInput = async (state, value) => {
+  if (state.ignoreNextInput) {
+    return {
+      ...state,
+      ignoreNextInput: false
+    };
+  }
   return {
     ...state,
-    statusBarItemsLeft: updateArray([...state.statusBarItemsLeft], newItem)
+    composerValue: value
   };
 };
 
-const itemRightCreate = (state, newItem) => {
+const submitRename = state => {
   const {
-    statusBarItemsRight
+    composerValue,
+    renamingSessionId,
+    sessions
   } = state;
-  const newStatusBarItemsRight = [...statusBarItemsRight, newItem];
+  const title = composerValue.trim();
+  if (!renamingSessionId || !title) {
+    return {
+      ...state,
+      renamingSessionId: ''
+    };
+  }
+  const updatedSessions = sessions.map(session => {
+    if (session.id !== renamingSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      title
+    };
+  });
   return {
     ...state,
-    statusBarItemsRight: newStatusBarItemsRight
+    composerValue: '',
+    ignoreNextInput: true,
+    renamingSessionId: '',
+    sessions: updatedSessions
   };
 };
-
-const itemRightUpdate = (state, newItem) => {
+const submitMessage = state => {
   const {
-    statusBarItemsRight
+    composerValue,
+    nextMessageId,
+    selectedSessionId,
+    sessions
   } = state;
-  const newStatusBarItemsRight = updateArray([...statusBarItemsRight], newItem);
+  const text = composerValue.trim();
+  if (!text) {
+    return {
+      ...state,
+      ignoreNextInput: true
+    };
+  }
+  const updatedSessions = sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
+    }
+    const message = {
+      id: `message-${nextMessageId}`,
+      role: 'user',
+      text
+    };
+    return {
+      ...session,
+      messages: [...session.messages, message]
+    };
+  });
   return {
     ...state,
-    statusBarItemsRight: newStatusBarItemsRight
+    composerValue: '',
+    ignoreNextInput: true,
+    lastSubmittedSessionId: selectedSessionId,
+    nextMessageId: nextMessageId + 1,
+    sessions: updatedSessions
   };
 };
-
-const OnStatusBarItem = 'onStatusBarItem';
-
-const GetStatusBarItems = 'ExtensionHost.getStatusBarItems2';
-
-const activateByEvent = (event, assetDir, platform) => {
-  // @ts-ignore
-  return activateByEvent$1(event, assetDir, platform);
-};
-
-const executeProviders = async ({
-  assetDir,
-  combineResults,
-  event,
-  method,
-  noProviderFoundMessage = 'No provider found',
-  noProviderFoundResult,
-  params,
-  platform
-}) => {
-  await activateByEvent(event, assetDir, platform);
-  // @ts-ignore
-  const result = await invoke$1(method, ...params);
-  return result;
-};
-
-const combineResults = results => {
-  return results.flat();
-};
-const getStatusBarItems$1 = (assetDir, platform) => {
-  return executeProviders({
-    assetDir,
-    combineResults,
-    event: OnStatusBarItem,
-    method: GetStatusBarItems,
-    noProviderFoundMessage: 'No status bar item provider found',
-    noProviderFoundResult: [],
-    params: [],
-    platform
-  });
-};
-
-const ProblemsErrorIcon = 'ProblemsErrorIcon';
-const ProblemsWarningIcon = 'ProblemsWarningIcon';
-const StatusBarItem = 'StatusBarItem';
-const StatusBarItemsLeft = 'StatusBarItemsLeft';
-const StatusBarItemsRight = 'StatusBarItemsRight';
-
-const getProblemsAriaLabel = (errorCount, warningCount) => {
-  const parts = [];
-  if (errorCount > 0) {
-    parts.push(`${errorCount} ${errorCount === 1 ? 'Problem' : 'Problems'}`);
-  }
-  if (warningCount > 0) {
-    parts.push(`${warningCount} ${warningCount === 1 ? 'Warning' : 'Warnings'}`);
+const handleKeyDown = async (state, key, shiftKey) => {
+  if (key !== 'Enter' || shiftKey) {
+    return state;
   }
-  if (parts.length === 0) {
-    return 'No Problems';
+  if (state.renamingSessionId) {
+    return submitRename(state);
   }
-  return parts.join(', ');
-};
-const getBuiltinStatusBarItems = async (errorCount, warningCount) => {
-  const extraItems = [{
-    ariaLabel: 'Notifications',
-    command: '',
-    // TODO should show notifications center
-    elements: [{
-      type: 'text',
-      value: 'Notifications'
-    }],
-    name: Notifications,
-    tooltip: 'Notifications'
-  }, {
-    ariaLabel: getProblemsAriaLabel(errorCount, warningCount),
-    command: '',
-    // TODO should show problems view
-    elements: [{
-      type: 'icon',
-      value: ProblemsErrorIcon
-    }, {
-      type: 'text',
-      value: `${errorCount}`
-    }, {
-      type: 'icon',
-      value: ProblemsWarningIcon
-    }, {
-      type: 'text',
-      value: `${warningCount}`
-    }],
-    name: Problems,
-    tooltip: 'Problems'
-  }];
-  return extraItems;
+  return submitMessage(state);
 };
 
-const toStatusBarItem = uiStatusBarItem => {
-  const elements = [];
-  if (uiStatusBarItem.icon) {
-    elements.push({
-      type: 'icon',
-      value: uiStatusBarItem.icon
-    });
-  }
-  if (uiStatusBarItem.text) {
-    elements.push({
-      type: 'text',
-      value: uiStatusBarItem.text
-    });
-  }
-  if (elements.length === 0) {
-    elements.push({
-      type: 'text',
-      value: ''
-    });
-  }
-  const ariaLabel = uiStatusBarItem.text || uiStatusBarItem.tooltip || uiStatusBarItem.name;
-  return {
-    ariaLabel,
-    command: uiStatusBarItem.command || undefined,
-    elements,
-    name: uiStatusBarItem.name,
-    tooltip: uiStatusBarItem.tooltip
-  };
+const id = 7201;
+const sendMessagePortToExtensionHostWorker = async port => {
+  await sendMessagePortToExtensionHostWorker$1(port, id);
 };
 
-const getActualIcon = extensionHostStatusBarItem => {
-  if (extensionHostStatusBarItem.icon === 'branch') {
-    return 'Branch';
+const createExtensionHostRpc = async () => {
+  try {
+    const rpc = await create$4({
+      commandMap: {},
+      send: sendMessagePortToExtensionHostWorker
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension host rpc`);
   }
-  return extensionHostStatusBarItem.icon || '';
-};
-const toUiStatusBarItem = extensionHostStatusBarItem => {
-  return {
-    command: extensionHostStatusBarItem.command || '',
-    icon: getActualIcon(extensionHostStatusBarItem),
-    name: extensionHostStatusBarItem.id || extensionHostStatusBarItem.name || '',
-    text: extensionHostStatusBarItem.text || '',
-    tooltip: extensionHostStatusBarItem.tooltip || ''
-  };
 };
 
-const toUiStatusBarItems = statusBarItems => {
-  if (!statusBarItems) {
-    return [];
-  }
-  return statusBarItems.map(toUiStatusBarItem);
+const initialize = async () => {
+  const rpc = await createExtensionHostRpc();
+  set$2(rpc);
 };
 
-const getStatusBarItems = async (showItems, assetDir, platform, errorCount, warningCount) => {
-  if (!showItems) {
-    return [];
+const ensureSessions = state => {
+  if (state.sessions.length > 0) {
+    return state.sessions;
   }
-  await activateByEvent('onSourceControl', assetDir, platform);
-  const extensionStatusBarItems = await getStatusBarItems$1(assetDir, platform);
-  const uiStatusBarItems = toUiStatusBarItems(extensionStatusBarItems);
-  const extraItems = await getBuiltinStatusBarItems(errorCount, warningCount);
-  return [...uiStatusBarItems.map(toStatusBarItem), ...extraItems];
-};
-
-const get = async key => {
-  return getPreference(key);
-};
-
-const itemsVisible = async () => {
-  const statusBarItemsPreference = (await get('statusBar.itemsVisible')) ?? true;
-  return statusBarItemsPreference;
+  const id = `session-${state.nextSessionId}`;
+  return [{
+    id,
+    messages: [],
+    title: `Chat ${state.nextSessionId}`
+  }];
 };
-
 const loadContent = async state => {
-  const {
-    assetDir,
-    errorCount,
-    platform,
-    warningCount
-  } = state;
-  const statusBarItemsPreference = await itemsVisible();
-  const statusBarItems = await getStatusBarItems(statusBarItemsPreference, assetDir, platform, errorCount, warningCount);
+  const sessions = ensureSessions(state);
+  const selectedSessionId = sessions.some(session => session.id === state.selectedSessionId) ? state.selectedSessionId : sessions[0].id;
   return {
     ...state,
-    errorCount: 0,
     initial: false,
-    statusBarItemsLeft: [...statusBarItems],
-    statusBarItemsRight: [],
-    warningCount: 0
+    nextSessionId: state.sessions.length === 0 ? state.nextSessionId + 1 : state.nextSessionId,
+    selectedSessionId,
+    sessions
   };
 };
 
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
 const text = data => {
   return {
     childCount: 0,
@@ -1855,104 +1797,158 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
+const Actions = 'Actions';
+const TestActive = 'TestActive';
+const SideBarLocation = 'SideBarLocation';
+const Button = 'Button';
+const Editor = 'Editor';
+const EditorContent = 'EditorContent';
+const IconButton = 'IconButton';
+const Label = 'Label';
+const List = 'List';
+const ListItems = 'ListItems';
+const Markdown = 'Markdown';
+const Message = 'Message';
+const MultilineInputBox = 'MultilineInputBox';
+const Viewlet = 'Viewlet';
+const WelcomeMessage = 'WelcomeMessage';
+
+const HandleInput = 4;
 const HandleClick = 11;
+const HandleKeyDown = 12;
 
-const getTextVirtualDom = element => {
+const getSessionDom = (session, selectedSessionId) => {
+  const selected = session.id === selectedSessionId;
+  const sessionClassName = selected ? `${List} ${TestActive}` : List;
   return [{
-    childCount: 1,
-    className: 'StatusBarItemLabel',
-    type: Span
-  }, text(element.value)];
-};
-const getIconVirtualDom = element => {
-  return [{
-    childCount: 0,
-    className: mergeClassNames(MaskIcon, element.value),
+    childCount: 2,
+    className: sessionClassName,
     type: Div
-  }];
-};
-const getStatusBarItemElementVirtualDom = element => {
-  if (element.type === 'text') {
-    return getTextVirtualDom(element);
-  }
-  if (element.type === 'icon') {
-    return getIconVirtualDom(element);
-  }
-  return [];
-};
-
-const getStatusBarItemVirtualDom = statusBarItem => {
-  const {
-    ariaLabel,
-    elements,
-    name,
-    tooltip
-  } = statusBarItem;
-  const elementNodes = elements.flatMap(getStatusBarItemElementVirtualDom);
-  const buttonNode = {
-    ariaLabel,
-    childCount: elements.length,
-    className: StatusBarItem,
-    name,
-    role: Button$1,
-    tabIndex: -1,
-    title: tooltip,
-    type: Button
-  };
-  return [buttonNode, ...elementNodes];
-};
-
-const getStatusBarItemsVirtualDom = (items, className) => {
-  if (items.length === 0) {
-    return [];
-  }
-  return [{
-    childCount: items.length,
-    className,
+  }, {
+    childCount: 1,
+    className: Button,
+    name: `session:${session.id}`,
+    role: Button$2,
+    tabIndex: 0,
+    type: Button$1
+  }, text(session.title), {
+    childCount: 2,
+    className: Actions,
     type: Div
-  }, ...items.flatMap(getStatusBarItemVirtualDom)];
-};
-
-const getStatusBarItemsLeftDom = statusBarItemsLeft => {
-  return getStatusBarItemsVirtualDom(statusBarItemsLeft, StatusBarItemsLeft);
-};
-
-const getStatusBarItemsRightDom = statusBarItemsRight => {
-  return getStatusBarItemsVirtualDom(statusBarItemsRight, StatusBarItemsRight);
-};
-
-const getChildCount = (leftCount, rightCount) => {
-  let count = 0;
-  if (leftCount > 0) {
-    count++;
-  }
-  if (rightCount > 0) {
-    count++;
-  }
-  return count;
+  }, {
+    childCount: 1,
+    className: IconButton,
+    name: `session-rename:${session.id}`,
+    role: Button$2,
+    tabIndex: 0,
+    title: 'Rename chat session',
+    type: Button$1
+  }, text('Rename'), {
+    childCount: 1,
+    className: IconButton,
+    name: `session-delete:${session.id}`,
+    role: Button$2,
+    tabIndex: 0,
+    title: 'Delete chat session',
+    type: Button$1
+  }, text('Delete')];
+};
+const getMessagesDom = messages => {
+  if (messages.length === 0) {
+    return [{
+      childCount: 1,
+      className: WelcomeMessage,
+      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 getStatusBarVirtualDom = (statusBarItemsLeft, statusBarItemsRight) => {
+const getStatusBarVirtualDom = (sessions, selectedSessionId, composerValue) => {
+  const selectedSession = sessions.find(session => session.id === selectedSessionId);
+  const messages = selectedSession ? selectedSession.messages : [];
+  const sessionNodes = sessions.flatMap(session => getSessionDom(session, selectedSessionId));
+  const messagesNodes = getMessagesDom(messages);
   const dom = [{
-    childCount: getChildCount(statusBarItemsLeft.length, statusBarItemsRight.length),
-    className: 'StatusBar',
+    childCount: 3,
+    className: Viewlet,
     onClick: HandleClick,
-    role: Status,
+    onInput: HandleInput,
+    onKeyDown: HandleKeyDown,
+    type: Div
+  }, {
+    childCount: 2,
+    className: SideBarLocation,
+    type: Div
+  }, {
+    childCount: 2,
+    className: Actions,
+    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: sessions.length,
+    className: ListItems,
+    type: Div
+  }, ...sessionNodes, {
+    childCount: 2,
+    className: Editor,
+    type: Div
+  }, {
+    childCount: Math.max(messagesNodes.length, 0),
+    className: EditorContent,
     type: Div
-  }, ...getStatusBarItemsLeftDom(statusBarItemsLeft), ...getStatusBarItemsRightDom(statusBarItemsRight)];
+  }, ...messagesNodes, {
+    childCount: 1,
+    className: Actions,
+    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
+  }];
   return dom;
 };
 
 const renderItems = (oldState, newState) => {
   const {
+    composerValue,
     initial,
-    statusBarItemsLeft,
-    statusBarItemsRight,
+    selectedSessionId,
+    sessions,
     uid
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getStatusBarVirtualDom(statusBarItemsLeft, statusBarItemsRight);
+  const dom = getStatusBarVirtualDom(sessions, selectedSessionId, composerValue);
   return [SetDom2, uid, dom];
 };
 
@@ -1990,7 +1986,7 @@ const render2 = (uid, diffResult) => {
   const {
     newState,
     oldState
-  } = get$1(uid);
+  } = get(uid);
   set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
@@ -2000,6 +1996,12 @@ const renderEventListeners = () => {
   return [{
     name: HandleClick,
     params: ['handleClick', TargetName]
+  }, {
+    name: HandleInput,
+    params: ['handleInput', TargetValue]
+  }, {
+    name: HandleKeyDown,
+    params: ['handleKeyDown', Key, ShiftKey]
   }];
 };
 
@@ -2012,30 +2014,39 @@ const resize = (state, dimensions) => {
 
 const saveState = state => {
   const {
-    statusBarItemsLeft,
-    statusBarItemsRight
+    composerValue,
+    nextMessageId,
+    nextSessionId,
+    renamingSessionId,
+    selectedSessionId,
+    sessions
   } = state;
   return {
-    itemsLeft: statusBarItemsLeft,
-    itemsRight: statusBarItemsRight
+    composerValue,
+    nextMessageId,
+    nextSessionId,
+    renamingSessionId,
+    selectedSessionId,
+    sessions
   };
 };
 
 const commandMap = {
-  'StatusBar.create': create,
-  'StatusBar.diff2': diff2,
-  'StatusBar.getCommandIds': getCommandIds,
-  'StatusBar.handleClick': wrapCommand(handleClick),
-  'StatusBar.initialize': initialize,
-  'StatusBar.itemLeftUpdate': wrapCommand(itemLeftUpdate),
-  'StatusBar.itemRightCreate': wrapCommand(itemRightCreate),
-  'StatusBar.itemRightUpdate': wrapCommand(itemRightUpdate),
-  'StatusBar.loadContent': wrapCommand(loadContent),
-  'StatusBar.render2': render2,
-  'StatusBar.renderEventListeners': renderEventListeners,
-  'StatusBar.resize': wrapCommand(resize),
-  'StatusBar.saveState': wrapGetter(saveState),
-  'StatusBar.terminate': terminate
+  'Chat.create': create,
+  'Chat.diff2': diff2,
+  'Chat.getCommandIds': getCommandIds,
+  'Chat.getKeyBindings': getKeyBindings,
+  'Chat.handleClick': wrapCommand(handleClick),
+  'Chat.handleInput': wrapCommand(handleInput),
+  'Chat.handleKeyDown': wrapCommand(handleKeyDown),
+  'Chat.initialize': initialize,
+  'Chat.loadContent': wrapCommand(loadContent),
+  'Chat.loadContent2': wrapCommand(loadContent),
+  'Chat.render2': render2,
+  'Chat.renderEventListeners': renderEventListeners,
+  'Chat.resize': wrapCommand(resize),
+  'Chat.saveState': wrapGetter(saveState),
+  'Chat.terminate': terminate
 };
 
 const listen = async () => {

package/package.json

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