From 4614ec56394869c53e56719d02fc00dd3cc8fc98 Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Sun, 4 Jan 2026 23:59:07 +0000
Subject: [PATCH] feat: add markdown formatting support to AI planning
 questions

Enhance user question display with markdown rendering for better readability.
Display formatted questions with emphasis, lists, and code snippets. Adjust
input display max-height based on platform (mobile: 15vh, desktop: 30vh).
---
 .../FunctionDefinitions/Functions/AskUserQuestion.ts     | 2 +-
 Components/ChatWindow.svelte                             | 9 ++++++++-
 Components/InputDisplay.svelte                           | 4 ++--
 Modals/HelpModalSvelte.svelte                            | 1 -
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/AIClasses/FunctionDefinitions/Functions/AskUserQuestion.ts b/AIClasses/FunctionDefinitions/Functions/AskUserQuestion.ts
index d863d0d..fdb19ce 100644
--- a/AIClasses/FunctionDefinitions/Functions/AskUserQuestion.ts
+++ b/AIClasses/FunctionDefinitions/Functions/AskUserQuestion.ts
@@ -18,7 +18,7 @@ Common use cases:
     properties: {
       question: {
         type: "string",
-        description: "The question to ask the user. Should be clear, specific, and provide enough context for the user to give a meaningful answer. Example: 'I found 3 files matching your criteria. Should I update all of them or would you like to review them first?'"
+        description: "The question to ask the user. Should be clear, specific, and provide enough context for the user to give a meaningful answer. Use markdown formatting for emphasis, lists, code snippets, or file paths to make the question easier to read. Example: 'I found **3 files** matching your criteria:\n\n- `src/components/Header.tsx`\n- `src/components/Footer.tsx`\n- `src/components/Sidebar.tsx`\n\nShould I update all of them or would you like to review them first?'"
       },
       user_message: {
         type: "string",
diff --git a/Components/ChatWindow.svelte b/Components/ChatWindow.svelte
index e8f87e8..32e4113 100644
--- a/Components/ChatWindow.svelte
+++ b/Components/ChatWindow.svelte
@@ -18,6 +18,8 @@
 	import type { Attachment } from "Conversations/Attachment";
 	import ChatPlanArea from "./ChatPlanArea.svelte";
 	import type { ExecutionPlanStore } from "Stores/ExecutionPlanStore";
+	import type { StreamingMarkdownService } from "Services/StreamingMarkdownService";
+	import { HTMLService } from "Services/HTMLService";
 
   const plugin: VaultkeeperAIPlugin = Resolve<VaultkeeperAIPlugin>(Services.VaultkeeperAIPlugin);
   const executionPlanStore: ExecutionPlanStore = Resolve<ExecutionPlanStore>(Services.ExecutionPlanStore);
@@ -25,6 +27,8 @@
   const chatService: ChatService = Resolve<ChatService>(Services.ChatService);
   const workSpaceService: WorkSpaceService = Resolve<WorkSpaceService>(Services.WorkSpaceService);
   const conversationService: ConversationFileSystemService = Resolve<ConversationFileSystemService>(Services.ConversationFileSystemService);
+  const streamingMarkdownService: StreamingMarkdownService = Resolve<StreamingMarkdownService>(Services.StreamingMarkdownService);
+  const htmlService: HTMLService = Resolve<HTMLService>(Services.HTMLService);
   const abortService: AbortService = Resolve<AbortService>(Services.AbortService);
 
   let chatContainer: HTMLDivElement;
@@ -123,7 +127,10 @@
         busyPlanning = false;
       },
       onPlanningQuestion: async (question) => {
-        chatInput.setDisplayItem(createEl("span", { text: question }));
+        const displayEl = createEl("div");
+        const formattedHtml = streamingMarkdownService.formatText(question);
+        htmlService.setHTMLContent(displayEl, formattedHtml);
+        chatInput.setDisplayItem(displayEl);
         return new Promise<string>((resolve) => {
           chatInput.enterQuestionMode(resolve);
         });
diff --git a/Components/InputDisplay.svelte b/Components/InputDisplay.svelte
index fac66a7..6da77c5 100644
--- a/Components/InputDisplay.svelte
+++ b/Components/InputDisplay.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Platform } from "obsidian";
 	import { slide } from "svelte/transition";
 
     export let editModeActive = false;
@@ -22,7 +23,7 @@
 
 {#if displayItem}
     <div id="input-display-wrapper" transition:slide>
-        <div id="input-display-container" class:edit-mode={editModeActive} bind:this={contentDiv}>
+        <div id="input-display-container" class:edit-mode={editModeActive} style:max-height={Platform.isMobile ? "15vh" : "30vh"} bind:this={contentDiv}>
         </div>
     </div>
 {/if}
@@ -37,7 +38,6 @@
 		display: flex;
 		overflow-y: auto;
 		scroll-behavior: smooth;
-        max-height: 15vh;
         justify-content: center;
         align-items: flex-start;
         margin: var(--size-4-2) 0;
diff --git a/Modals/HelpModalSvelte.svelte b/Modals/HelpModalSvelte.svelte
index 2b2a30a..fc29dac 100644
--- a/Modals/HelpModalSvelte.svelte
+++ b/Modals/HelpModalSvelte.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Copy } from "Enums/Copy";
-	import { Selector } from "Enums/Selector";
 	import type VaultkeeperAIPlugin from "main";
 	import { DropdownComponent, setIcon } from "obsidian";
 	import { Resolve } from "Services/DependencyService";