feat: improve Electron template

Author: giladgd

templates/electron-typescript-react/electron/state/llmState.ts

@@ -360,36 +360,46 @@ export const llmFunctions = {
                         simplifiedChat: getSimplifiedChatHistory(true, message)
                     }
                 };
-                await chatSession.prompt(message, {
-                    signal: promptAbortController.signal,
-                    stopOnAbortSignal: true,
-                    functions: modelFunctions,
-                    onResponseChunk(chunk) {
-                        inProgressResponse = squashMessageIntoModelChatMessages(
-                            inProgressResponse,
-                            (chunk.type == null || chunk.segmentType == null)
-                                ? {
-                                    type: "text",
-                                    text: chunk.text
-                                }
-                                : {
-                                    type: "segment",
-                                    segmentType: chunk.segmentType,
-                                    text: chunk.text,
-                                    startTime: chunk.segmentStartTime?.toISOString(),
-                                    endTime: chunk.segmentEndTime?.toISOString()
+
+                const abortSignal = promptAbortController.signal;
+                try {
+                    await chatSession.prompt(message, {
+                        signal: abortSignal,
+                        stopOnAbortSignal: true,
+                        functions: modelFunctions,
+                        onResponseChunk(chunk) {
+                            inProgressResponse = squashMessageIntoModelChatMessages(
+                                inProgressResponse,
+                                (chunk.type == null || chunk.segmentType == null)
+                                    ? {
+                                        type: "text",
+                                        text: chunk.text
+                                    }
+                                    : {
+                                        type: "segment",
+                                        segmentType: chunk.segmentType,
+                                        text: chunk.text,
+                                        startTime: chunk.segmentStartTime?.toISOString(),
+                                        endTime: chunk.segmentEndTime?.toISOString()
+                                    }
+                            );
+
+                            llmState.state = {
+                                ...llmState.state,
+                                chatSession: {
+                                    ...llmState.state.chatSession,
+                                    simplifiedChat: getSimplifiedChatHistory(true, message)
                                 }
-                        );
+                            };
+                        }
+                    });
+                } catch (err) {
+                    if (err !== abortSignal.reason)
+                        throw err;
+
+                    // if the prompt was aborted before the generation even started, we ignore the error
+                }
 
-                        llmState.state = {
-                            ...llmState.state,
-                            chatSession: {
-                                ...llmState.state.chatSession,
-                                simplifiedChat: getSimplifiedChatHistory(true, message)
-                            }
-                        };
-                    }
-                });
                 llmState.state = {
                     ...llmState.state,
                     chatSession: {
@@ -450,6 +460,8 @@ export const llmFunctions = {
             };
 
             chatSession.onDispose.createListener(() => {
+                chatSessionCompletionEngine = null;
+                promptAbortController = null;
                 llmState.state = {
                     ...llmState.state,
                     chatSession: {

templates/electron-typescript-react/src/App/App.css

@@ -17,6 +17,10 @@
     min-height: 100%;
     max-width: 1280px;
 
+    > .chatHistory {
+        margin-bottom: 32px;
+    }
+
     > .message {
         flex: 1;
         display: flex;

templates/electron-typescript-react/src/App/App.tsx

@@ -16,21 +16,40 @@ export function App() {
     const state = useExternalState(llmState);
     const {generatingResult} = state.chatSession;
     const isScrollAnchoredRef = useRef(false);
+    const lastAnchorScrollTopRef = useRef<number>(0);
 
     const isScrolledToTheBottom = useCallback(() => {
-        return document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight;
+        return (
+            document.documentElement.scrollHeight - document.documentElement.scrollTop - 1
+        ) <= document.documentElement.clientHeight;
     }, []);
 
     const scrollToBottom = useCallback(() => {
-        document.documentElement.scrollTop = document.documentElement.scrollHeight;
-        isScrollAnchoredRef.current = isScrolledToTheBottom();
+        const newScrollTop = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+
+        if (newScrollTop > document.documentElement.scrollTop && newScrollTop > lastAnchorScrollTopRef.current) {
+            document.documentElement.scrollTo({
+                top: newScrollTop,
+                behavior: "smooth"
+            });
+            lastAnchorScrollTopRef.current = document.documentElement.scrollTop;
+        }
+
+        isScrollAnchoredRef.current = true;
     }, []);
 
     useLayoutEffect(() => {
         // anchor scroll to bottom
 
         function onScroll() {
-            isScrollAnchoredRef.current = isScrolledToTheBottom();
+            const currentScrollTop = document.documentElement.scrollTop;
+
+            isScrollAnchoredRef.current = isScrolledToTheBottom() ||
+                currentScrollTop >= lastAnchorScrollTopRef.current;
+
+            // handle scroll animation
+            if (isScrollAnchoredRef.current)
+                lastAnchorScrollTopRef.current = currentScrollTop;
         }
 
         const observer = new ResizeObserver(() => {
@@ -169,6 +188,7 @@ export function App() {
         {
             !showMessage &&
             <ChatHistory
+                className="chatHistory"
                 simplifiedChat={state.chatSession.simplifiedChat}
                 generatingResult={generatingResult}
             />

templates/electron-typescript-react/src/App/components/ChatHistory/ChatHistory.tsx

@@ -1,40 +1,46 @@
+import {useMemo} from "react";
+import classNames from "classnames";
 import {LlmState, SimplifiedModelChatItem} from "../../../../electron/state/llmState.ts";
 import {UserMessage} from "./components/UserMessage/UserMessage.js";
 import {ModelMessage} from "./components/ModelMessage/ModelMessage.js";
 
 import "./ChatHistory.css";
 
 
-export function ChatHistory({simplifiedChat, generatingResult}: ChatHistoryProps) {
-    return <div className="appChatHistory">
-        {
-            simplifiedChat.map((item, index) => {
-                if (item.type === "model")
-                    return <ModelMessage
-                        key={index}
-                        modelMessage={item}
-                        active={index === simplifiedChat.length - 1 && generatingResult}
-                    />;
-                else if (item.type === "user")
-                    return <UserMessage key={index} message={item} />;
-
-                return null;
-            })
-        }
+export function ChatHistory({simplifiedChat, generatingResult, className}: ChatHistoryProps) {
+    const renderChatItems = useMemo(() => {
+        if (simplifiedChat.length > 0 &&
+            simplifiedChat.at(-1)!.type !== "model" &&
+            generatingResult
+        )
+            return [...simplifiedChat, emptyModelMessage];
+
+        return simplifiedChat;
+    }, [simplifiedChat, generatingResult]);
+
+    return <div className={classNames("appChatHistory", className)}>
         {
-            (
-                simplifiedChat.length > 0 &&
-                simplifiedChat[simplifiedChat.length - 1]!.type !== "model" &&
-                generatingResult
-            ) &&
-            <ModelMessage modelMessage={emptyModelMessage} active />
+            renderChatItems
+                .map((item, index) => {
+                    if (item.type === "model")
+                        return <ModelMessage
+                            key={index}
+                            modelMessage={item}
+                            active={index === renderChatItems.length - 1 && generatingResult}
+                        />;
+                    else if (item.type === "user")
+                        return <UserMessage key={index} message={item} />;
+
+                    return null;
+                })
         }
     </div>;
 }
 
 type ChatHistoryProps = {
     simplifiedChat: LlmState["chatSession"]["simplifiedChat"],
-    generatingResult: boolean
+    generatingResult: boolean,
+    className?: string
 };
 
 const emptyModelMessage: SimplifiedModelChatItem = {

templates/electron-typescript-react/src/App/components/ChatHistory/components/ModelMessage/ModelMessage.css

@@ -5,13 +5,22 @@
     word-break: break-word;
     max-width: calc(100% - 48px);
     box-sizing: border-box;
+    min-height: fit-content;
+    interpolate-size: allow-keywords;
+
+    transition: min-height 0.5s var(--transition-easing), max-height 0.5s var(--transition-easing);
 
     &:hover + .buttons {
         opacity: 1;
     }
 
     &:last-child {
         margin-bottom: 0px;
+        min-height: calc(50svh);
+
+        @starting-style {
+            min-height: 0px;
+        }
     }
 
     > .text {
@@ -31,5 +40,9 @@
         &:focus-visible {
             opacity: 1;
         }
+
+        &[inert] {
+            opacity: 0;
+        }
     }
 }

templates/electron-typescript-react/src/App/components/ChatHistory/components/ModelMessage/ModelMessage.tsx

@@ -37,11 +37,9 @@ export function ModelMessage({modelMessage, active}: ModelMessageProps) {
             (modelMessage.message.length === 0 && active) &&
             <MessageMarkdown className="text" activeDot />
         }
-        {
-            !active && <div className="buttons">
-                <ModelMessageCopyButton modelMessage={modelMessage.message} />
-            </div>
-        }
+        <div className="buttons" inert={active}>
+            <ModelMessageCopyButton modelMessage={modelMessage.message} />
+        </div>
     </div>;
 }
 

templates/electron-typescript-react/src/App/components/ChatHistory/components/UserMessage/UserMessage.css

@@ -4,7 +4,7 @@
     padding: 8px 12px;
     border-radius: 12px;
     margin-top: 0px;
-    margin-bottom: 12px;
+    margin-bottom: 16px;
     margin-inline-start: 48px;
     margin-inline-end: 12px;
     color: var(--user-message-text-color);

templates/electron-typescript-react/src/App/components/MessageMarkdown/MessageMarkdown.css

@@ -4,7 +4,8 @@
     &.active {
         &:empty:after,
         &:not(:empty)>:last-child:not(ol, ul, table):after,
-        &:not(:empty)>:last-child:where(ol, ul)>:last-child:after,
+        &:not(:empty)>:last-child:where(ol, ul)>:last-child:not(:has(>:last-child:where(ol, ul))):after,
+        &:not(:empty)>:last-child:where(ol, ul)>:last-child>:last-child:where(ol, ul)>:last-child:after,
         &:not(:empty)>:last-child:where(table)>:last-child>:last-child>:last-child:after {
             content: "";
             position: static;