@lvce-editor/chat-view 1.3.0 → 1.4.0

package/dist/chatViewWorkerMain.js

@@ -1271,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 '';
@@ -1370,6 +1451,9 @@ const handleClick = async (state, name) => {
     const id = name.slice(DELETE_PREFIX.length);
     return deleteSession(state, id);
   }
+  if (name === SEND) {
+    return handleClickSend(state);
+  }
   return state;
 };
 
@@ -1378,6 +1462,8 @@ const handleClickClose = async () => {
   await invoke('Chat.terminate');
 };
 
+const handleClickSettings = async () => {};
+
 const handleInput = async (state, value) => {
   if (state.ignoreNextInput) {
     return {
@@ -1391,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);
@@ -1513,41 +1522,9 @@ 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%;
-}
+// TODO render things like scrollbar height,scrollbar offset, textarea height,
+// list height
+const css = `
 `;
 const renderCss = (oldState, newState) => {
   return [SetCss, newState.uid, css];
@@ -1866,58 +1843,8 @@ const ChatWelcomeMessage = 'ChatWelcomeMessage';
 const HandleInput = 4;
 const HandleClick = 11;
 const HandleKeyDown = 12;
-
-const getChatDetailsDom = (messagesNodes, composerValue) => {
-  return [{
-    childCount: 2,
-    className: ChatDetails,
-    type: Div
-  }, {
-    childCount: Math.max(messagesNodes.length, 0),
-    className: ChatDetailsContent,
-    type: Div
-  }, ...messagesNodes, {
-    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
-  }];
-};
-
-const getChatHeaderDom = sessionsLength => {
-  return [{
-    childCount: 2,
-    className: ChatHeader,
-    type: Div
-  }, {
-    childCount: 2,
-    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: sessionsLength,
-    className: ChatList,
-    type: Div
-  }];
-};
+const HandleClickClose = 13;
+const HandleClickSettings = 14;
 
 const getMessagesDom = messages => {
   if (messages.length === 0) {
@@ -1983,10 +1910,8 @@ const getSessionDom = (session, _selectedSessionId) => {
 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',
@@ -1994,7 +1919,75 @@ const getChatVirtualDom = (sessions, selectedSessionId, composerValue) => {
     onInput: HandleInput,
     onKeyDown: HandleKeyDown,
     type: Div
-  }, ...chatHeaderDom, ...sessionNodes, ...chatDetailsDom];
+  }, {
+    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('⚙'), {
+    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: 2,
+    className: ChatDetails,
+    type: Div
+  }, {
+    childCount: Math.max(messagesNodes.length, 0),
+    className: ChatDetailsContent,
+    type: Div
+  }, ...messagesNodes, {
+    childCount: 2,
+    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',
+    role: Button$2,
+    tabIndex: 0,
+    title: 'Send message',
+    type: Button$1
+  }, text('Send')];
   return dom;
 };
 
@@ -2059,6 +2052,12 @@ const renderEventListeners = () => {
   return [{
     name: HandleClick,
     params: ['handleClick', TargetName]
+  }, {
+    name: HandleClickClose,
+    params: ['handleClickClose']
+  }, {
+    name: HandleClickSettings,
+    params: ['handleClickSettings']
   }, {
     name: HandleInput,
     params: ['handleInput', TargetValue]
@@ -2094,6 +2093,28 @@ 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,
@@ -2101,6 +2122,7 @@ const commandMap = {
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.handleClick': wrapCommand(handleClick),
   'Chat.handleClickClose': handleClickClose,
+  'Chat.handleClickSettings': handleClickSettings,
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
   'Chat.initialize': initialize,
@@ -2110,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.3.0",
+  "version": "1.4.0",
   "description": "Chat View Worker",
   "repository": {
     "type": "git",