feat: add quick actions panel for common prompts

- Add Rust backend for managing quick actions with persistent storage
- Create QuickActionsPanel component with edit/delete functionality
- Add quickActions store for frontend state management
- Move Actions and Snippets buttons to input controls row
- Include 6 default quick actions: Review PR, Run Tests, Explain File,
  Fix Error, Write Tests, and Refactor
- Support custom quick action creation and management

Closes #15
This commit is contained in:
2026-01-25 16:25:59 -08:00
committed by Naomi Carrigan
parent 87cf633564
commit 02cc8bd0d5
5 changed files with 881 additions and 23 deletions
+115 -23
View File
@@ -26,6 +26,7 @@
} from "$lib/commands/slashCommands";
import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
import SnippetLibraryPanel from "$lib/components/SnippetLibraryPanel.svelte";
import QuickActionsPanel from "$lib/components/QuickActionsPanel.svelte";
import type { Attachment } from "$lib/types/messages";
const INPUT_HISTORY_KEY = "hikari-input-history";
@@ -41,6 +42,7 @@
let attachments = $state<Attachment[]>([]);
let isDragging = $state(false);
let showSnippetLibrary = $state(false);
let showQuickActions = $state(false);
// Input history state
let inputHistory = $state<string[]>([]);
@@ -629,6 +631,42 @@ User: ${formattedMessage}`;
userHasTyped = true;
}
async function handleQuickAction(prompt: string): Promise<void> {
// Quick actions send the prompt directly
if (!isConnected || isSubmitting) return;
// Add to history
addToHistory(prompt);
historyIndex = -1;
tempInput = "";
userHasTyped = false;
isSubmitting = true;
// Reset notification state for new user message
handleNewUserMessage();
claudeStore.addLine("user", prompt);
characterState.setState("thinking");
try {
const conversationId = get(claudeStore.activeConversationId);
if (!conversationId) {
throw new Error("No active conversation");
}
await invoke("send_prompt", {
conversationId,
message: prompt,
});
} catch (error) {
console.error("Failed to send quick action:", error);
claudeStore.addLine("error", `Failed to send: ${error}`);
characterState.setTemporaryState("error", 3000);
} finally {
isSubmitting = false;
}
}
function handleKeyDown(event: KeyboardEvent) {
// Handle command menu navigation
if (showCommandMenu && matchingCommands.length > 0) {
@@ -705,6 +743,50 @@ User: ${formattedMessage}`;
<div class="input-controls flex gap-2 mb-2">
<MessageModeSelector />
<button
type="button"
onclick={() => (showQuickActions = true)}
class="control-button"
title="Quick Actions"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span>Actions</span>
</button>
<button
type="button"
onclick={() => (showSnippetLibrary = true)}
class="control-button"
title="Snippet Library"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
<polyline points="14,2 14,8 20,8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
<line x1="10" y1="9" x2="8" y2="9" />
</svg>
<span>Snippets</span>
</button>
</div>
<div class="input-row">
@@ -735,29 +817,6 @@ User: ${formattedMessage}`;
</div>
<div class="button-wrapper">
<button
type="button"
onclick={() => (showSnippetLibrary = true)}
class="attach-button"
title="Snippet Library"
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
<polyline points="14,2 14,8 20,8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
<line x1="10" y1="9" x2="8" y2="9" />
</svg>
</button>
<button type="button" onclick={handleFilePicker} class="attach-button" title="Attach files">
<svg
width="20"
@@ -811,6 +870,13 @@ User: ${formattedMessage}`;
/>
{/if}
{#if showQuickActions}
<QuickActionsPanel
onClose={() => (showQuickActions = false)}
onAction={handleQuickAction}
/>
{/if}
<style>
.input-bar {
display: flex;
@@ -853,6 +919,32 @@ User: ${formattedMessage}`;
gap: 8px;
}
.control-button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
font-size: 14px;
white-space: nowrap;
}
.control-button:hover {
background: var(--bg-tertiary);
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.control-button:active {
transform: scale(0.95);
}
.input-row {
display: flex;
gap: 12px;