@lvce-editor/chat-view 1.2.0 → 1.3.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 = [];
@@ -1366,6 +1373,11 @@ const handleClick = async (state, name) => {
   return state;
 };
 
+const handleClickClose = async () => {
+  // @ts-ignore
+  await invoke('Chat.terminate');
+};
+
 const handleInput = async (state, value) => {
   if (state.ignoreNextInput) {
     return {
@@ -1501,6 +1513,46 @@ const loadContent = async state => {
   };
 };
 
+const css = `.Chat {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  grid-template-rows: auto 1fr auto;
+  height: 100%;
+}
+
+.ChatHeader {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 8px;
+}
+
+.ChatList {
+  border-right: 1px solid var(--Widget-border);
+  overflow: auto;
+}
+
+.ChatDetails {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.ChatDetailsContent {
+  flex: 1;
+  overflow: auto;
+  padding: 8px;
+}
+
+.MultilineInputBox {
+  width: 100%;
+}
+`;
+const renderCss = (oldState, newState) => {
+  return [SetCss, newState.uid, css];
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -1797,67 +1849,81 @@ 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 getSessionDom = (session, selectedSessionId) => {
-  const selected = session.id === selectedSessionId;
-  const sessionClassName = selected ? `${List} ${TestActive}` : List;
+const getChatDetailsDom = (messagesNodes, composerValue) => {
   return [{
     childCount: 2,
-    className: sessionClassName,
+    className: ChatDetails,
     type: Div
   }, {
+    childCount: Math.max(messagesNodes.length, 0),
+    className: ChatDetailsContent,
+    type: Div
+  }, ...messagesNodes, {
     childCount: 1,
-    className: Button,
-    name: `session:${session.id}`,
-    role: Button$2,
-    tabIndex: 0,
-    type: Button$1
-  }, text(session.title), {
+    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
+  }];
+};
+
+const getChatHeaderDom = sessionsLength => {
+  return [{
+    childCount: 2,
+    className: ChatHeader,
+    type: Div
+  }, {
     childCount: 2,
-    className: Actions,
+    className: ChatActions,
     type: Div
   }, {
     childCount: 1,
-    className: IconButton,
-    name: `session-rename:${session.id}`,
-    role: Button$2,
-    tabIndex: 0,
-    title: 'Rename chat session',
-    type: Button$1
-  }, text('Rename'), {
+    className: Label,
+    type: Span
+  }, text('Chats'), {
     childCount: 1,
     className: IconButton,
-    name: `session-delete:${session.id}`,
+    name: 'create-session',
     role: Button$2,
     tabIndex: 0,
-    title: 'Delete chat session',
+    title: 'New Chat',
     type: Button$1
-  }, text('Delete')];
+  }, text('+'), {
+    childCount: sessionsLength,
+    className: ChatList,
+    type: Div
+  }];
 };
+
 const getMessagesDom = messages => {
   if (messages.length === 0) {
     return [{
       childCount: 1,
-      className: WelcomeMessage,
+      className: ChatWelcomeMessage,
       type: Div
     }, text('Start a conversation by typing below.')];
   }
@@ -1877,63 +1943,58 @@ const getMessagesDom = messages => {
     }, text(message.text)];
   });
 };
-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: 3,
-    className: Viewlet,
-    onClick: HandleClick,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
-    type: Div
-  }, {
+
+const getSessionDom = (session, _selectedSessionId) => {
+  const sessionClassName = ChatList;
+  return [{
     childCount: 2,
-    className: SideBarLocation,
+    className: sessionClassName,
     type: Div
   }, {
+    childCount: 1,
+    className: Button,
+    name: `session:${session.id}`,
+    role: Button$2,
+    tabIndex: 0,
+    type: Button$1
+  }, text(session.title), {
     childCount: 2,
-    className: Actions,
+    className: ChatActions,
     type: Div
   }, {
-    childCount: 1,
-    className: Label,
-    type: Span
-  }, text('Chats'), {
     childCount: 1,
     className: IconButton,
-    name: 'create-session',
+    name: `session-rename:${session.id}`,
     role: Button$2,
     tabIndex: 0,
-    title: 'New Chat',
+    title: 'Rename chat session',
     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
-  }, ...messagesNodes, {
+  }, text('Rename'), {
     childCount: 1,
-    className: Actions,
+    className: IconButton,
+    name: `session-delete:${session.id}`,
+    role: Button$2,
+    tabIndex: 0,
+    title: 'Delete chat session',
+    type: Button$1
+  }, text('Delete')];
+};
+
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue) => {
+  const selectedSession = sessions.find(session => session.id === selectedSessionId);
+  const messages = selectedSession ? selectedSession.messages : [];
+  const chatHeaderDom = getChatHeaderDom(sessions.length);
+  const sessionNodes = sessions.flatMap(session => getSessionDom(session));
+  const messagesNodes = getMessagesDom(messages);
+  const chatDetailsDom = getChatDetailsDom(messagesNodes, composerValue);
+  const dom = [{
+    childCount: 3,
+    className: Viewlet + ' Chat',
+    onClick: HandleClick,
+    onInput: HandleInput,
+    onKeyDown: HandleKeyDown,
     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
-  }];
+  }, ...chatHeaderDom, ...sessionNodes, ...chatDetailsDom];
   return dom;
 };
 
@@ -1948,7 +2009,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 +2022,8 @@ const renderIncremental = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
@@ -2037,6 +2100,7 @@ const commandMap = {
   'Chat.getCommandIds': getCommandIds,
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.handleClick': wrapCommand(handleClick),
+  'Chat.handleClickClose': handleClickClose,
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
   'Chat.initialize': initialize,

package/package.json

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