feat: refactor suggestion handling and centralize defaults for thread UI

studio/frontend/src/components/assistant-ui/thread.tsx

@@ -120,13 +120,26 @@ const ThreadScrollToBottom: FC = () => {
 };
 
 const SuggestionItem: FC = () => {
+  const aui = useAui();
+  const prompt = useAuiState(({ suggestion }) => suggestion.prompt);
+  const isDisabled = useAuiState(({ thread }) => thread.isDisabled);
+  const isRunning = useAuiState(({ thread }) => thread.isRunning);
+
   return (
-    <SuggestionPrimitive.Trigger
-      send={true}
+    <button
+      type="button"
+      onClick={() => {
+        if (!isDisabled && !isRunning) {
+          aui.thread().append(prompt);
+          aui.composer().setText("");
+          return;
+        }
+        aui.composer().setText(prompt);
+      }}
       className="fade-in slide-in-from-bottom-1 animate-in cursor-pointer corner-squircle rounded-xl border bg-background px-4 py-2.5 text-left text-sm text-foreground shadow-sm transition-colors duration-150 hover:bg-accent"
     >
       <SuggestionPrimitive.Title />
-    </SuggestionPrimitive.Trigger>
+    </button>
   );
 };
 

studio/frontend/src/features/chat/runtime-provider.tsx

@@ -28,6 +28,13 @@ import { createOpenAIStreamAdapter } from "./api/chat-adapter";
 import { db } from "./db";
 import type { MessageRecord, ModelType } from "./types";
 
+const DEFAULT_SUGGESTIONS = [
+  "Draw a simple flowchart of a login system using Mermaid",
+  "Solve the integral of x²·sin(x) step by step",
+  "Write a Python function that finds the longest palindrome in a string",
+  "Format a comparison of 3 databases as a markdown table with pros and cons",
+];
+
 class PDFAttachmentAdapter implements AttachmentAdapter {
   accept = "application/pdf";
 
@@ -297,14 +304,7 @@ function useRuntimeHook(): ReturnType<typeof useLocalRuntime> {
 function ThreadAutoSwitch({
   threadId,
 }: { threadId: string }): ReactElement | null {
-  const aui = useAui({
-    suggestions: Suggestions([
-      "Draw a simple flowchart of a login system using Mermaid",
-      "Solve the integral of x²·sin(x) step by step",
-      "Write a Python function that finds the longest palindrome in a string",
-      "Format a comparison of 3 databases as a markdown table with pros and cons",
-    ]),
-  });
+  const aui = useAui();
   const isLoading = useAuiState(({ threads }) => threads.isLoading);
   const mainThreadId = useAuiState(({ threads }) => threads.mainThreadId);
 
@@ -353,7 +353,9 @@ export function ChatRuntimeProvider({
     },
   });
 
-  const aui = useAui();
+  const aui = useAui({
+    suggestions: Suggestions(DEFAULT_SUGGESTIONS),
+  });
 
   return (
     <AssistantRuntimeProvider runtime={runtime} aui={aui}>