htmx for suggestions

Author: andersrex

src/components/ChatBox.tsx

@@ -1,9 +1,10 @@
+import { Suggestions } from "./Suggestions";
+
 export const ChatBox = () => (
   <form
     hx-post="/chat"
     style={{
       width: "100%",
-      display: "flex",
     }}
     hx-target="#nextMessage"
     hx-swap="beforebegin scroll:bottom"
@@ -51,5 +52,6 @@ export const ChatBox = () => (
         <span>Send</span>
       </button>
     </div>
+    <Suggestions />
   </form>
 );

src/components/ChatView.tsx

@@ -42,7 +42,6 @@ export const ChatView = () => (
     </div>
 
     <ChatBox />
-    <Suggestions />
     <Footer />
   </div>
 );

src/components/Footer.tsx

@@ -9,7 +9,21 @@ export const Footer = () => (
       padding: "1rem",
     }}
   >
-    <button class="toggle-button" onclick="toggleShowControls()">
+    <button
+      style={{
+        border: "1px solid #ddd",
+        borderRadius: "20rem",
+        flexBasis: "content",
+        fontSize: "1rem",
+        backgroundColor: "white",
+        position: "absolute",
+        left: "1rem",
+        width: "55px",
+        height: "55px",
+      }}
+      class="toggle-button"
+      onclick="toggleShowControls()"
+    >
       <span class="up-caret">∧</span>
       <span class="down-caret">∨</span>
     </button>

src/components/LandingView.tsx

@@ -36,7 +36,6 @@ export const LandingView = () => (
         A distraction-free LLM chat web app optimized for Kindle. The perfect companion for your book. Powered by
         Mixtral from Mistral AI. Mainly tested on Kindle Paperwhites.
       </p>
-
       <p
         style={{
           margin: "2rem 0",

src/components/Message.tsx

@@ -1,5 +1,9 @@
 export const Message = ({ message, suggestions }: { message: string; suggestions?: string }) => (
-  <p class="message">
+  <p
+    style={{
+      whiteSpace: "pre-wrap",
+    }}
+  >
     <b>Kindllm</b>: {message}
   </p>
 );

src/components/Suggestions.tsx

@@ -1,13 +1,26 @@
-export const Suggestions = () => (
+export const Suggestions = ({ suggestions }: { suggestions?: string[] }) => (
   <div
+    id="suggestions-container"
     class="suggestions-container"
     style={{
       padding: "0.5rem 1rem",
     }}
   >
-    <div id="suggestions-retry">
+    <div id="suggestions">
+      {(suggestions || []).map((suggestion) => (
+        <Suggestion suggestion={suggestion} />
+      ))}
+    </div>
+    <div
+      id="suggestions-retry"
+      style={{
+        opacity: suggestions?.length == 0 ? 1 : 0,
+        textAlign: "center",
+      }}
+    >
       No good follow-up suggestions found
       <button
+        id="suggestions-retry-button"
         style={{
           border: "1px solid #ddd",
           marginLeft: "1rem",
@@ -17,11 +30,34 @@ export const Suggestions = () => (
           fontSize: "1rem",
           backgroundColor: "white",
         }}
-        onclick="retrySuggestions()"
+        hx-post="/suggestions"
+        hx-trigger="click,retry"
+        hx-target="#suggestions-container"
+        hx-swap="outerHTML"
       >
         Retry
       </button>
     </div>
-    <div id="suggestions"></div>
   </div>
 );
+
+const Suggestion = ({ suggestion }: { suggestion: string }) => (
+  <button
+    onclick={`setMessageAndSubmit("${suggestion}")`}
+    style={{
+      border: "1px solid black",
+      padding: "1rem 2rem",
+      borderRadius: "10rem",
+      textAlign: "left",
+      fontSize: "0.8rem",
+      marginBottom: "0.5rem",
+      overflow: "hidden",
+      width: "100%",
+      height: "55px",
+      display: "table-cell",
+      verticalAlign: "middle",
+    }}
+  >
+    {suggestion}
+  </button>
+);

src/index.tsx

@@ -8,6 +8,7 @@ import { LandingView } from "./components/LandingView";
 import { PrivacyView } from "./components/Privacy";
 import { About } from "./components/About";
 import { getNextMessage, getSuggestions } from "./llm";
+import { Suggestions } from "./components/Suggestions";
 
 const ENABLE_NON_KINDLE = true; // Set to true to test on non-Kindle devices
 
@@ -65,14 +66,9 @@ app.post(
     }
 
     const { messages } = c.req.valid("form");
+    const suggestions = await getSuggestions(c.env.API_KEY, messages);
 
-    const suggestionsCompletion = await getSuggestions(c.env.API_KEY, messages);
-
-    if (!suggestionsCompletion) {
-      return c.text("");
-    }
-
-    return c.text(suggestionsCompletion.choices[0].message.content || "");
+    return c.html(<Suggestions suggestions={suggestions.slice(0, 3)} />);
   }
 );
 

src/llm.ts

@@ -44,7 +44,7 @@ export async function getNextMessage(apiKey: string, messages: string, message:
   return messageContent;
 }
 
-export async function getSuggestions(apiKey: string, messages: string) {
+export async function getSuggestions(apiKey: string, messages: string): Promise<string[]> {
   const messageHistory = messages.split("||||").map((m) => {
     if (m.startsWith("<b>Kindllm</b>: ")) {
       return {
@@ -62,7 +62,7 @@ export async function getSuggestions(apiKey: string, messages: string) {
   const message = messageHistory[messageHistory.length - 1].content;
   const lastMessage = messageHistory[messageHistory.length - 2];
 
-  if (!message || !lastMessage) return;
+  if (!message || !lastMessage) return [];
 
   const suggestionsSystemPrompt = {
     role: "system",
@@ -82,13 +82,14 @@ export async function getSuggestions(apiKey: string, messages: string) {
     apiKey: apiKey,
   });
 
-  const suggestions = await openai.chat.completions.create({
+  const response = await openai.chat.completions.create({
     messages: suggestionsPrompt,
     model: MODEL,
     response_format: {
       type: "json_object",
     },
   });
 
-  return suggestions;
+  const jsonContent = JSON.parse(response.choices[0].message.content || "{}");
+  return jsonContent?.suggestions || [];
 }