From 613a2c72f591167fef0726dcd3caacbaa221cc01 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Thu, 26 Mar 2026 10:46:26 -0500
Subject: [PATCH] improved chat ui

---
 src/components/AIHelpPanel.tsx     | 80 +++++++++++++++++-------------
 src/components/MarkdownMessage.tsx | 54 ++++++++++++++++++++
 src/lib/ai-help.ts                 |  3 +-
 3 files changed, 102 insertions(+), 35 deletions(-)

diff --git a/src/components/AIHelpPanel.tsx b/src/components/AIHelpPanel.tsx
index 3c560b7..0f524c9 100644
--- a/src/components/AIHelpPanel.tsx
+++ b/src/components/AIHelpPanel.tsx
@@ -1,5 +1,5 @@
 import { type Component, For, Show, createEffect, createMemo, createSignal } from "solid-js";
-import { MessageCircle, LoaderCircle, RefreshCw, Send } from "lucide-solid";
+import { MessageCircle, LoaderCircle, RefreshCw, ArrowUp } from "lucide-solid";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { FIREWORKS_HELP_MODEL } from "@/lib/app-config";
@@ -146,36 +146,41 @@ export const AIHelpPanel: Component<{
                 <div
                     ref={messagesViewport}
                     class={cn(
-                        "min-h-0 flex-1 overflow-y-auto space-y-3 rounded-xl border border-border bg-background",
-                        isSidebar() ? "p-2.5" : "p-3"
+                        "min-h-0 flex-1 overflow-y-auto space-y-3",
+                        isSidebar() ? "px-0.5" : "px-0.5"
                     )}
                 >
                     <For each={messages()}>
                         {(message) => (
                             <div class="space-y-2">
-                                <div class={cn("flex", message.role === "user" ? "justify-end" : "justify-start")}>
+                                <div
+                                    class={cn(
+                                        "flex",
+                                        message.role === "user"
+                                            ? "justify-center pt-8 pb-0"
+                                            : "justify-start"
+                                    )}
+                                >
                                     <div
                                         class={cn(
-                                            "rounded-2xl px-4 py-3 leading-relaxed whitespace-pre-wrap shadow-sm",
-                                            isSidebar() ? "max-w-[92%]" : "max-w-[90%] sm:max-w-[80%]",
-                                            message.role === "user"
-                                                ? "bg-primary text-primary-foreground"
-                                                : "bg-card border border-border text-foreground"
+                                            "rounded-2xl px-4 leading-relaxed whitespace-pre-wrap shadow-sm",
+                                            message.role === "assistant"
+                                                ? "w-full bg-card border border-border px-4 py-3 text-foreground"
+                                                : cn(
+                                                    "bg-card px-4 pt-3 pb-0 text-foreground",
+                                                    isSidebar() ? "max-w-[92%]" : "max-w-[90%] sm:max-w-[80%]"
+                                                )
                                         )}
                                     >
-                                        <div class="mb-1 flex items-center gap-2 text-[0.625rem] font-black uppercase tracking-[0.18em] opacity-70">
-                                            <Show when={message.role === "assistant"} fallback={<span>You</span>}>
+                                        <Show when={message.role === "assistant"}>
+                                            <div class="mb-1 flex items-center gap-2 text-[0.625rem] font-black uppercase tracking-[0.18em] opacity-70">
                                                 <MessageCircle size={12} />
                                                 <span>TasGrid Help</span>
-                                            </Show>
-                                        </div>
+                                            </div>
+                                        </Show>
                                         <MarkdownMessage
                                             content={message.content}
-                                            class={cn(
-                                                message.role === "user"
-                                                    ? "prose-invert prose-headings:text-primary-foreground prose-p:text-primary-foreground prose-strong:text-primary-foreground prose-code:bg-primary-foreground/15 prose-code:text-primary-foreground prose-a:text-primary-foreground prose-blockquote:text-primary-foreground"
-                                                    : ""
-                                            )}
+                                            class=""
                                         />
                                     </div>
                                 </div>
@@ -240,26 +245,33 @@ export const AIHelpPanel: Component<{
                         void submitQuestion();
                     }}
                 >
-                    <textarea
-                        value={input()}
-                        onInput={(e) => setInput(e.currentTarget.value)}
-                        placeholder="Ask how a TasGrid feature works, what a setting does, or why something may behave a certain way..."
-                        class={cn(
-                            "flex w-full rounded-xl border border-input bg-background transition-colors placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none leading-relaxed",
-                            isSidebar() ? "min-h-[88px] px-3 py-2.5 text-sm" : "min-h-[96px] px-3 py-2.5 text-sm"
-                        )}
-                    />
-                    <div class={cn(
-                        "flex gap-2",
-                        isSidebar() ? "flex-col" : "justify-end"
-                    )}>
+                    <div class="relative">
+                        <textarea
+                            value={input()}
+                            onInput={(e) => setInput(e.currentTarget.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter" && !e.shiftKey) {
+                                    e.preventDefault();
+                                    void submitQuestion();
+                                }
+                            }}
+                            placeholder="Ask how a TasGrid feature works, what a setting does, or why something may behave a certain way..."
+                            class={cn(
+                                "flex w-full rounded-xl border border-input bg-background transition-colors placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none leading-relaxed",
+                                isSidebar()
+                                    ? "min-h-[88px] px-3 py-2.5 pr-14 text-sm"
+                                    : "min-h-[96px] px-3 py-2.5 pr-14 text-sm"
+                            )}
+                        />
                         <Button
                             type="submit"
-                            class={cn("gap-2 rounded-xl", isSidebar() && "w-full")}
+                            size="icon"
+                            class="absolute bottom-3 right-3 h-8 w-8 rounded-full shadow-sm"
                             disabled={isLoading() || !input().trim()}
+                            aria-label="Ask Question"
+                            title="Ask Question"
                         >
-                            <Send size={14} />
-                            Ask Question
+                            <ArrowUp size={15} />
                         </Button>
                     </div>
                 </form>
diff --git a/src/components/MarkdownMessage.tsx b/src/components/MarkdownMessage.tsx
index deb1fc5..9a4b5f6 100644
--- a/src/components/MarkdownMessage.tsx
+++ b/src/components/MarkdownMessage.tsx
@@ -20,6 +20,25 @@ const applyInlineMarkdown = (value: string) => {
     return text;
 };
 
+const splitTableRow = (line: string) => {
+    const trimmed = line.trim().replace(/^\|/, "").replace(/\|$/, "");
+    return trimmed.split("|").map(cell => applyInlineMarkdown(cell.trim()));
+};
+
+const isTableSeparator = (line: string) => {
+    const trimmed = line.trim().replace(/^\|/, "").replace(/\|$/, "");
+    if (!trimmed) return false;
+
+    return trimmed
+        .split("|")
+        .every(cell => /^:?-{3,}:?$/.test(cell.trim()));
+};
+
+const isTableRow = (line: string) => {
+    const trimmed = line.trim();
+    return trimmed.includes("|") && splitTableRow(trimmed).length > 1;
+};
+
 const renderMarkdown = (markdown: string) => {
     const lines = markdown.replace(/\r\n/g, "\n").split("\n");
     const html: string[] = [];
@@ -46,6 +65,36 @@ const renderMarkdown = (markdown: string) => {
             continue;
         }
 
+        const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+            const level = headingMatch[1].length;
+            const text = applyInlineMarkdown(headingMatch[2].trim());
+            html.push(`<h${level}>${text}</h${level}>`);
+            i += 1;
+            continue;
+        }
+
+        if (
+            i + 1 < lines.length &&
+            isTableRow(lines[i]) &&
+            isTableSeparator(lines[i + 1])
+        ) {
+            const headerCells = splitTableRow(lines[i]);
+            const bodyRows: string[] = [];
+            i += 2;
+
+            while (i < lines.length && lines[i].trim() && isTableRow(lines[i])) {
+                const cells = splitTableRow(lines[i]).map(cell => `<td>${cell}</td>`);
+                bodyRows.push(`<tr>${cells.join("")}</tr>`);
+                i += 1;
+            }
+
+            html.push(
+                `<div class="table-wrap"><table><thead><tr>${headerCells.map(cell => `<th>${cell}</th>`).join("")}</tr></thead>${bodyRows.length > 0 ? `<tbody>${bodyRows.join("")}</tbody>` : ""}</table></div>`
+            );
+            continue;
+        }
+
         if (/^[-*]\s+/.test(trimmed)) {
             const items: string[] = [];
             while (i < lines.length && /^[-*]\s+/.test(lines[i].trim())) {
@@ -97,12 +146,17 @@ export const MarkdownMessage: Component<{
         <div
             class={cn(
                 "prose prose-sm dark:prose-invert max-w-none",
+                "prose-headings:mt-4 prose-headings:mb-2 prose-headings:font-semibold prose-headings:tracking-tight",
+                "prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-h4:text-sm",
                 "prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0",
                 "prose-pre:my-3 prose-pre:rounded-lg prose-pre:bg-muted prose-pre:p-3",
                 "prose-code:rounded prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:text-[0.9em]",
                 "prose-code:before:content-none prose-code:after:content-none",
                 "prose-a:text-primary prose-a:underline prose-a:underline-offset-4",
                 "prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic",
+                "prose-table:my-3 prose-table:w-full prose-table:border-collapse prose-th:border prose-th:border-border prose-th:bg-muted prose-th:px-2 prose-th:py-1 prose-th:text-left prose-th:font-semibold",
+                "prose-td:border prose-td:border-border prose-td:px-2 prose-td:py-1 align-top",
+                "[&_div.table-wrap]:my-3 [&_div.table-wrap]:overflow-x-auto",
                 props.class
             )}
             innerHTML={html()}
diff --git a/src/lib/ai-help.ts b/src/lib/ai-help.ts
index 1cea872..f38b282 100644
--- a/src/lib/ai-help.ts
+++ b/src/lib/ai-help.ts
@@ -13,7 +13,8 @@ You must follow this instruction exactly: "use only this guide for all informati
 If the guide does not contain the answer, say that the guide does not mention it.
 Do not use outside product knowledge.
 Do not invent buttons, workflows, settings, or behaviors.
-Prefer concise, practical answers.
+Answer in the most direct and concise way possible initially.
+After the main answer, end with a short follow-up line like "If you would like, I can explain the intricacies in more detail."
 When helpful, mention the relevant section name from the guide.
 
 TASGRID REFERENCE GUIDE