diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index df77d3ea28..9c94e4eb22 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/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 (
- {
+ 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"
>
-
+
);
};
diff --git a/studio/frontend/src/features/chat/runtime-provider.tsx b/studio/frontend/src/features/chat/runtime-provider.tsx
index bf1b658c3d..7dcc6644e8 100644
--- a/studio/frontend/src/features/chat/runtime-provider.tsx
+++ b/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 {
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 (