feat: render markdown in the Electron example (#234)

* feat: render markdown in the Electron example
* fix: only build practical targets by default in the Electron example

Author: giladgd

templates/electron-typescript-react/electron-builder.ts

@@ -60,22 +60,13 @@ export default {
         artifactName: "${name}.macOS.${version}.${arch}.${ext}"
     },
     win: {
-        target: [
-            {
-                target: "nsis",
-                arch: [
-                    "x64",
-                    "arm64"
-                ]
-            },
-            {
-                target: "appx",
-                arch: [
-                    "x64",
-                    "arm64"
-                ]
-            }
-        ],
+        target: [{
+            target: "nsis",
+            arch: [
+                "x64",
+                "arm64"
+            ]
+        }],
 
         artifactName: "${name}.Windows.${version}.${arch}.${ext}"
     },
@@ -99,8 +90,7 @@ export default {
         }, {
             target: "snap",
             arch: [
-                "x64",
-                "arm64"
+                "x64"
             ]
         }, {
             target: "deb",

templates/electron-typescript-react/electron/rpc/llmRpc.ts

@@ -28,7 +28,16 @@ export class ElectronLlmRpc {
             if (!res.canceled && res.filePaths.length > 0) {
                 llmState.state = {
                     ...llmState.state,
-                    selectedModelFilePath: path.resolve(res.filePaths[0])
+                    selectedModelFilePath: path.resolve(res.filePaths[0]),
+                    chatSession: {
+                        loaded: false,
+                        generatingResult: false,
+                        simplifiedChat: [],
+                        draftPrompt: {
+                            prompt: llmState.state.chatSession.draftPrompt.prompt,
+                            completion: ""
+                        }
+                    }
                 };
 
                 if (!llmState.state.llama.loaded)

templates/electron-typescript-react/package.json

@@ -24,12 +24,15 @@
   "dependencies": {
     "birpc": "^0.2.17",
     "classnames": "^2.5.1",
+    "highlight.js": "^11.9.0",
     "lifecycle-utils": "^1.4.1",
+    "markdown-it": "^14.1.0",
     "node-llama-cpp": "file:../..",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/markdown-it": "^14.1.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.12.0",

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

@@ -158,7 +158,7 @@ export function App() {
             />
         }
         <InputRow
-            disabled={!state.model.loaded}
+            disabled={!state.model.loaded || !state.contextSequence.loaded}
             stopGeneration={
                 generatingResult
                     ? stopActivePrompt
@@ -167,7 +167,6 @@ export function App() {
             onPromptInput={onPromptInput}
             sendPrompt={sendPrompt}
             generatingResult={generatingResult}
-            contextSequenceLoaded={state.contextSequence.loaded}
             autocompleteInputDraft={state.chatSession.draftPrompt.prompt}
             autocompleteCompletion={state.chatSession.draftPrompt.completion}
         />

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

@@ -6,44 +6,52 @@
     overflow: auto;
     padding: 24px 0px;
 
-    > .message.user {
-        align-self: flex-end;
-        background-color: var(--user-message-background-color);
-        padding: 8px 12px;
-        border-radius: 12px;
-        margin-bottom: 12px;
-        margin-inline-start: 48px;
-        margin-inline-end: 12px;
-        color: var(--user-message-text-color);
-        white-space: pre-wrap;
-
-        &:not(:first-child) {
-            margin-top: 36px;
+    > .message {
+        &.user {
+            align-self: flex-end;
+            background-color: var(--user-message-background-color);
+            padding: 8px 12px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            margin-inline-start: 48px;
+            margin-inline-end: 12px;
+            color: var(--user-message-text-color);
+
+            &:not(:first-child) {
+                margin-top: 36px;
+            }
         }
-    }
 
-    > .message.model {
-        align-self: flex-start;
-        margin-inline-end: 48px;
-        padding-inline-start: 24px;
-        white-space: pre-wrap;
-
-        &.active {
-            &:after {
-                content: "";
-                position: static;
-                display: inline-block;
-                background-color: currentColor;
-                width: 8px;
-                height: 8px;
-                translate: 0px -2px;
-                border-radius: 9999px;
-                margin-inline-start: 8px;
-                vertical-align: middle;
-
-                animation: activeModelMessageIndicator 2s infinite ease-in-out;
+        &.model {
+            align-self: flex-start;
+            margin-inline-end: 48px;
+            padding-inline-start: 24px;
+
+            &.active {
+                &:after {
+                    content: "";
+                    position: static;
+                    display: inline-block;
+                    background-color: currentColor;
+                    width: 8px;
+                    height: 8px;
+                    translate: 0px -2px;
+                    border-radius: 9999px;
+                    margin-inline-start: 8px;
+                    vertical-align: middle;
+
+                    animation: activeModelMessageIndicator 2s infinite ease-in-out;
+                }
             }
         }
+
+        > :first-child {
+            margin-top: 0px;
+        }
+
+        > :last-child {
+            margin-bottom: 0px;
+        }
     }
 }
 

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

@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import {LlmState} from "../../../../electron/state/llmState.ts";
+import {MarkdownContent} from "../MarkdownContent/MarkdownContent.js";
 
 import "./ChatHistory.css";
 
@@ -10,14 +11,14 @@ export function ChatHistory({simplifiedChat, generatingResult}: ChatHistoryProps
             simplifiedChat.map((item, index) => {
                 if (item.type === "model") {
                     const isActive = index === simplifiedChat.length - 1 && generatingResult;
-                    return <div key={index} className={classNames("message", "model", isActive && "active")}>
+                    return <MarkdownContent key={index} className={classNames("message", "model", isActive && "active")}>
                         {item.message}
-                    </div>;
+                    </MarkdownContent>;
 
                 } else if (item.type === "user")
-                    return <div key={index} className="message user">
+                    return <MarkdownContent key={index} className="message user">
                         {item.message}
-                    </div>;
+                    </MarkdownContent>;
 
                 return null;
             })

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

@@ -7,8 +7,7 @@ import "./InputRow.css";
 
 
 export function InputRow({
-    disabled = false, stopGeneration, sendPrompt, onPromptInput, autocompleteInputDraft, autocompleteCompletion, generatingResult,
-    contextSequenceLoaded
+    disabled = false, stopGeneration, sendPrompt, onPromptInput, autocompleteInputDraft, autocompleteCompletion, generatingResult
 }: InputRowProps) {
     const [inputText, setInputText] = useState<string>("");
     const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -95,7 +94,7 @@ export function InputRow({
                 className="input"
                 autoComplete="off"
                 spellCheck
-                disabled={disabled || !contextSequenceLoaded}
+                disabled={disabled}
                 onScroll={resizeInput}
                 placeholder={
                     autocompleteText === ""
@@ -120,7 +119,7 @@ export function InputRow({
         </button>
         <button
             className="sendButton"
-            disabled={disabled || !contextSequenceLoaded || inputText === "" || generatingResult}
+            disabled={disabled || inputText === "" || generatingResult}
             onClick={submitPrompt}
         >
             <AddMessageIconSVG className="icon" />
@@ -135,6 +134,5 @@ type InputRowProps = {
     onPromptInput?(currentText: string): void,
     autocompleteInputDraft?: string,
     autocompleteCompletion?: string,
-    generatingResult: boolean,
-    contextSequenceLoaded: boolean
+    generatingResult: boolean
 };