@lvce-editor/chat-view 1.2.0 → 1.4.0

package/dist/chatViewWorkerMain.js

@@ -983,6 +983,7 @@ const TargetValue = 'event.target.value';
 const ExtensionHostWorker = 44;
 const RendererWorker = 1;
 
+const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetPatches = 'Viewlet.setPatches';
 
@@ -1059,6 +1060,7 @@ const {
 } = create$2(ExtensionHostWorker);
 
 const {
+  invoke,
   invokeAndTransfer,
   set: set$1
 } = create$2(RendererWorker);
@@ -1230,15 +1232,20 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   set(uid, state, state);
 };
 
+const isEqual$1 = (oldState, newState) => {
+  return oldState.initial === newState.initial;
+};
+
 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;
 };
 
 const RenderItems = 4;
+const RenderCss = 10;
 const RenderIncremental = 11;
 
-const modules = [isEqual];
-const numbers = [RenderIncremental];
+const modules = [isEqual, isEqual$1];
+const numbers = [RenderIncremental, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1264,10 +1271,91 @@ const getKeyBindings = () => {
   return [];
 };
 
+const submitRename = state => {
+  const {
+    composerValue,
+    renamingSessionId,
+    sessions
+  } = state;
+  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,
+    composerValue: '',
+    ignoreNextInput: true,
+    renamingSessionId: '',
+    sessions: updatedSessions
+  };
+};
+const submitMessage = state => {
+  const {
+    composerValue,
+    nextMessageId,
+    selectedSessionId,
+    sessions
+  } = state;
+  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,
+    composerValue: '',
+    ignoreNextInput: true,
+    lastSubmittedSessionId: selectedSessionId,
+    nextMessageId: 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 '';
@@ -1363,9 +1451,19 @@ const handleClick = async (state, name) => {
     const id = name.slice(DELETE_PREFIX.length);
     return deleteSession(state, id);
   }
+  if (name === SEND) {
+    return handleClickSend(state);
+  }
   return state;
 };
 
+const handleClickClose = async () => {
+  // @ts-ignore
+  await invoke('Chat.terminate');
+};
+
+const handleClickSettings = async () => {};
+
 const handleInput = async (state, value) => {
   if (state.ignoreNextInput) {
     return {
@@ -1379,83 +1477,6 @@ const handleInput = async (state, value) => {
   };
 };
 
-const submitRename = state => {
-  const {
-    composerValue,
-    renamingSessionId,
-    sessions
-  } = state;
-  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,
-    composerValue: '',
-    ignoreNextInput: true,
-    renamingSessionId: '',
-    sessions: updatedSessions
-  };
-};
-const submitMessage = state => {
-  const {
-    composerValue,
-    nextMessageId,
-    selectedSessionId,
-    sessions
-  } = state;
-  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,
-    composerValue: '',
-    ignoreNextInput: true,
-    lastSubmittedSessionId: selectedSessionId,
-    nextMessageId: 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 id = 7201;
 const sendMessagePortToExtensionHostWorker = async port => {
   await sendMessagePortToExtensionHostWorker$1(port, id);
@@ -1501,6 +1522,14 @@ const loadContent = async state => {
   };
 };
 
+// TODO render things like scrollbar height,scrollbar offset, textarea height,
+// list height
+const css = `
+`;
+const renderCss = (oldState, newState) => {
+  return [SetCss, newState.uid, css];
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -1797,29 +1826,53 @@ const diffTree = (oldNodes, newNodes) => {
   return removeTrailingNavigationPatches(patches);
 };
 
-const Actions = 'Actions';
-const TestActive = 'TestActive';
-const SideBarLocation = 'SideBarLocation';
+const ChatActions = 'ChatActions';
+const ChatHeader = 'ChatHeader';
 const Button = 'Button';
-const Editor = 'Editor';
-const EditorContent = 'EditorContent';
+const ChatDetails = 'ChatDetails';
+const ChatDetailsContent = 'ChatDetailsContent';
 const IconButton = 'IconButton';
 const Label = 'Label';
-const List = 'List';
-const ListItems = 'ListItems';
+const ChatList = 'ChatList';
 const Markdown = 'Markdown';
 const Message = 'Message';
 const MultilineInputBox = 'MultilineInputBox';
 const Viewlet = 'Viewlet';
-const WelcomeMessage = 'WelcomeMessage';
+const ChatWelcomeMessage = 'ChatWelcomeMessage';
 
 const HandleInput = 4;
 const HandleClick = 11;
 const HandleKeyDown = 12;
+const HandleClickClose = 13;
+const HandleClickSettings = 14;
 
-const getSessionDom = (session, selectedSessionId) => {
-  const selected = session.id === selectedSessionId;
-  const sessionClassName = selected ? `${List} ${TestActive}` : List;
+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;
   return [{
     childCount: 2,
     className: sessionClassName,
@@ -1833,7 +1886,7 @@ const getSessionDom = (session, selectedSessionId) => {
     type: Button$1
   }, text(session.title), {
     childCount: 2,
-    className: Actions,
+    className: ChatActions,
     type: Div
   }, {
     childCount: 1,
@@ -1853,49 +1906,26 @@ const getSessionDom = (session, selectedSessionId) => {
     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 = (sessions, selectedSessionId, composerValue) => {
+
+const getChatVirtualDom = (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 sessionNodes = sessions.flatMap(session => getSessionDom(session));
   const messagesNodes = getMessagesDom(messages);
   const dom = [{
     childCount: 3,
-    className: Viewlet,
+    className: Viewlet + ' Chat',
     onClick: HandleClick,
     onInput: HandleInput,
     onKeyDown: HandleKeyDown,
     type: Div
   }, {
     childCount: 2,
-    className: SideBarLocation,
+    className: ChatHeader,
     type: Div
   }, {
-    childCount: 2,
-    className: Actions,
+    childCount: 4,
+    className: ChatActions,
     type: Div
   }, {
     childCount: 1,
@@ -1910,20 +1940,36 @@ const getStatusBarVirtualDom = (sessions, selectedSessionId, composerValue) => {
     title: 'New Chat',
     type: Button$1
   }, text('+'), {
+    childCount: 1,
+    className: IconButton,
+    onClick: HandleClickSettings,
+    role: Button$2,
+    tabIndex: 0,
+    title: 'Settings',
+    type: Button$1
+  }, text('⚙'), {
+    childCount: 1,
+    className: IconButton,
+    onClick: HandleClickClose,
+    role: Button$2,
+    tabIndex: 0,
+    title: 'Close Chat',
+    type: Button$1
+  }, text('×'), {
     childCount: sessions.length,
-    className: ListItems,
+    className: ChatList,
     type: Div
   }, ...sessionNodes, {
     childCount: 2,
-    className: Editor,
+    className: ChatDetails,
     type: Div
   }, {
     childCount: Math.max(messagesNodes.length, 0),
-    className: EditorContent,
+    className: ChatDetailsContent,
     type: Div
   }, ...messagesNodes, {
-    childCount: 1,
-    className: Actions,
+    childCount: 2,
+    className: ChatActions,
     type: Div
   }, {
     childCount: 0,
@@ -1933,7 +1979,15 @@ const getStatusBarVirtualDom = (sessions, selectedSessionId, composerValue) => {
     rows: 4,
     type: TextArea,
     value: composerValue
-  }];
+  }, {
+    childCount: 1,
+    className: Button,
+    name: 'send',
+    role: Button$2,
+    tabIndex: 0,
+    title: 'Send message',
+    type: Button$1
+  }, text('Send')];
   return dom;
 };
 
@@ -1948,7 +2002,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getStatusBarVirtualDom(sessions, selectedSessionId, composerValue);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue);
   return [SetDom2, uid, dom];
 };
 
@@ -1961,6 +2015,8 @@ const renderIncremental = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
@@ -1996,6 +2052,12 @@ const renderEventListeners = () => {
   return [{
     name: HandleClick,
     params: ['handleClick', TargetName]
+  }, {
+    name: HandleClickClose,
+    params: ['handleClickClose']
+  }, {
+    name: HandleClickSettings,
+    params: ['handleClickSettings']
   }, {
     name: HandleInput,
     params: ['handleInput', TargetValue]
@@ -2031,12 +2093,36 @@ const saveState = state => {
   };
 };
 
+const dummySessions = [{
+  id: 'session-a',
+  messages: [],
+  title: 'Dummy Chat A'
+}, {
+  id: 'session-b',
+  messages: [],
+  title: 'Dummy Chat B'
+}, {
+  id: 'session-c',
+  messages: [],
+  title: 'Dummy Chat C'
+}];
+const setChatList = state => {
+  return {
+    ...state,
+    nextSessionId: dummySessions.length + 1,
+    selectedSessionId: dummySessions[0].id,
+    sessions: dummySessions
+  };
+};
+
 const commandMap = {
   'Chat.create': create,
   'Chat.diff2': diff2,
   'Chat.getCommandIds': getCommandIds,
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.handleClick': wrapCommand(handleClick),
+  'Chat.handleClickClose': handleClickClose,
+  'Chat.handleClickSettings': handleClickSettings,
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
   'Chat.initialize': initialize,
@@ -2046,6 +2132,7 @@ const commandMap = {
   'Chat.renderEventListeners': renderEventListeners,
   'Chat.resize': wrapCommand(resize),
   'Chat.saveState': wrapGetter(saveState),
+  'Chat.setChatList': wrapCommand(setChatList),
   'Chat.terminate': terminate
 };
 

package/package.json

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