feat(ai): add cloud providers and local model selection
Add OpenAI-compatible, Anthropic, and custom endpoint support while
keeping the local model path intact. The UI now lets users choose the
provider and local model, and staged diffs are prepared more carefully
so generated commit messages stay focused and usable.
- src-tauri/crates/commit_ai/*
- Add HTTP-based generators for OpenAI, Anthropic, and custom APIs.
- Introduce shared request/response handling and message sanitizing.
- Expand prompt building to require a body and trim long diffs safely.
- Expose selectable local model metadata and loading by model ID.
- src-tauri/src/git.rs
- Add commands for listing local models and loading them in background.
- Route generation by provider and include staged file lists in prompts.
- Exclude noisy lockfiles from detailed staged diffs.
- src-tauri/src/main.rs
- Wire the new AI commands into the Tauri app setup.
- src/lib/components/*
- Add an AI settings dialog and update the commit panel for provider
and model selection.
- src/lib/git.ts, src/lib/types.ts, src/App.svelte, src/app.css
- Extend frontend state, types, and styling for AI provider settings.
- src-tauri/Cargo.lock, src-tauri/crates/commit_ai/Cargo.toml
- Add reqwest and serde_json for cloud API requests.
This commit is contained in:
Christoph Brandau
+116
-8
@@ -5,6 +5,7 @@
|
||||
import { AlertCircle, BookOpen, FolderOpen, GitBranch, GitMerge, LoaderCircle, Plus, Search, X } from "@lucide/svelte";
|
||||
|
||||
import TitleBar from "./lib/TitleBar.svelte";
|
||||
import AiSettingsDialog from "./lib/components/AiSettingsDialog.svelte";
|
||||
import BranchPanel from "./lib/components/BranchPanel.svelte";
|
||||
import CommitPanel from "./lib/components/CommitPanel.svelte";
|
||||
import CompareDialog from "./lib/components/CompareDialog.svelte";
|
||||
@@ -26,6 +27,8 @@
|
||||
checkoutBranch,
|
||||
commit,
|
||||
commitAiGenerate,
|
||||
commitAiLoad,
|
||||
commitAiLocalModels,
|
||||
commitAiStatus,
|
||||
compareCommits,
|
||||
cancelCodeSearch,
|
||||
@@ -64,6 +67,7 @@
|
||||
} from "./lib/git";
|
||||
|
||||
import type {
|
||||
AiSettings,
|
||||
CommitAiPhase,
|
||||
ConflictFile,
|
||||
ExplorerNode,
|
||||
@@ -77,6 +81,7 @@
|
||||
GitRepositoryFile,
|
||||
GitSearchHit,
|
||||
GitStatus,
|
||||
LocalModelOption,
|
||||
PatchApplyAction,
|
||||
PreparedResolution,
|
||||
StoredCredential,
|
||||
@@ -104,6 +109,7 @@
|
||||
|
||||
const OPEN_REPOS_KEY = "gitlite.openRepos.v1";
|
||||
const RECENT_REPOS_KEY = "gitlite.recentRepos.v1";
|
||||
const AI_SETTINGS_KEY = "gitlite.aiSettings.v1";
|
||||
|
||||
// ── State ──────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -130,6 +136,9 @@
|
||||
let commitAiPhase: CommitAiPhase = "idle";
|
||||
let commitAiGenerating = false;
|
||||
let commitAiPollTimer: ReturnType<typeof setInterval> | undefined;
|
||||
let aiSettings: AiSettings = defaultAiSettings();
|
||||
let aiSettingsOpen = false;
|
||||
let localModelOptions: LocalModelOption[] = [];
|
||||
let errorMessage = "";
|
||||
let operation = "";
|
||||
let compareFrom = "";
|
||||
@@ -213,7 +222,7 @@
|
||||
loadRepoLists();
|
||||
autoRefreshTimer = setInterval(() => { void autoRefreshTick(); }, AUTO_REFRESH_INTERVAL);
|
||||
void checkForUpdates();
|
||||
startCommitAiPolling();
|
||||
void initCommitAi();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
@@ -256,29 +265,85 @@
|
||||
|
||||
// ── Commit AI ──────────────────────────────────────────────────────────────
|
||||
|
||||
function stopCommitAiPolling() {
|
||||
if (commitAiPollTimer) { clearInterval(commitAiPollTimer); commitAiPollTimer = undefined; }
|
||||
}
|
||||
|
||||
async function pollCommitAiStatus() {
|
||||
try {
|
||||
const result = await commitAiStatus();
|
||||
commitAiPhase = result.phase;
|
||||
} catch { /* ignore transient errors */ }
|
||||
if (commitAiPhase === "ready" || commitAiPhase === "error") {
|
||||
if (commitAiPollTimer) { clearInterval(commitAiPollTimer); commitAiPollTimer = undefined; }
|
||||
}
|
||||
if (commitAiPhase === "ready" || commitAiPhase === "error") stopCommitAiPolling();
|
||||
}
|
||||
|
||||
function startCommitAiPolling() {
|
||||
// The model downloads (first run only) and loads in the background on app start;
|
||||
// poll until it's ready (or failed) so the "AI" button can enable itself.
|
||||
// Only the local model has a download/load phase worth polling — cloud providers are
|
||||
// plain API calls with nothing to wait for.
|
||||
stopCommitAiPolling();
|
||||
if (aiSettings.provider !== "local") return;
|
||||
void pollCommitAiStatus();
|
||||
commitAiPollTimer = setInterval(() => { void pollCommitAiStatus(); }, 2000);
|
||||
}
|
||||
|
||||
async function initCommitAi() {
|
||||
aiSettings = loadAiSettings();
|
||||
try {
|
||||
localModelOptions = await commitAiLocalModels();
|
||||
} catch { /* AI features stay disabled if this fails; not fatal to the app */ }
|
||||
if (aiSettings.provider === "local") {
|
||||
try { await commitAiLoad(aiSettings.localModelId); } catch { /* surfaced via status polling */ }
|
||||
}
|
||||
startCommitAiPolling();
|
||||
}
|
||||
|
||||
function saveAiSettings(next: AiSettings) {
|
||||
const modelChanged = next.provider === "local" && next.localModelId !== aiSettings.localModelId;
|
||||
aiSettings = next;
|
||||
persistAiSettings(next);
|
||||
aiSettingsOpen = false;
|
||||
if (next.provider === "local" && (modelChanged || commitAiPhase === "idle")) {
|
||||
commitAiPhase = "idle";
|
||||
void commitAiLoad(next.localModelId);
|
||||
}
|
||||
startCommitAiPolling();
|
||||
}
|
||||
|
||||
async function generateCommitMessageWithAi() {
|
||||
if (!activeRepoPath || commitAiPhase !== "ready" || commitAiGenerating) return;
|
||||
if (!activeRepoPath || commitAiGenerating) return;
|
||||
if (aiSettings.provider === "local" && commitAiPhase !== "ready") return;
|
||||
commitAiGenerating = true;
|
||||
errorMessage = "";
|
||||
try {
|
||||
commitMessage = await commitAiGenerate(activeRepoPath, commitMessage.trim() || undefined);
|
||||
const notes = commitMessage.trim() || undefined;
|
||||
if (aiSettings.provider === "local") {
|
||||
commitMessage = await commitAiGenerate(activeRepoPath, { provider: "local", notes });
|
||||
} else if (aiSettings.provider === "openai") {
|
||||
const cred = await credLoad("ai:openai");
|
||||
commitMessage = await commitAiGenerate(activeRepoPath, {
|
||||
provider: "openai",
|
||||
notes,
|
||||
model: aiSettings.openaiModel,
|
||||
apiKey: cred?.password,
|
||||
});
|
||||
} else if (aiSettings.provider === "anthropic") {
|
||||
const cred = await credLoad("ai:anthropic");
|
||||
commitMessage = await commitAiGenerate(activeRepoPath, {
|
||||
provider: "anthropic",
|
||||
notes,
|
||||
model: aiSettings.anthropicModel,
|
||||
apiKey: cred?.password,
|
||||
});
|
||||
} else {
|
||||
const cred = await credLoad("ai:custom");
|
||||
commitMessage = await commitAiGenerate(activeRepoPath, {
|
||||
provider: "custom",
|
||||
notes,
|
||||
model: aiSettings.customModel,
|
||||
baseUrl: aiSettings.customBaseUrl,
|
||||
apiKey: cred?.password,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
errorMessage = errorToMessage(error);
|
||||
} finally {
|
||||
@@ -446,6 +511,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
function defaultAiSettings(): AiSettings {
|
||||
return {
|
||||
provider: "local",
|
||||
localModelId: "qwen2.5-1.5b",
|
||||
openaiModel: "gpt-4o-mini",
|
||||
anthropicModel: "claude-3-5-haiku-latest",
|
||||
customBaseUrl: "",
|
||||
customModel: "",
|
||||
};
|
||||
}
|
||||
|
||||
function loadAiSettings(): AiSettings {
|
||||
try {
|
||||
const stored = JSON.parse(localStorage.getItem(AI_SETTINGS_KEY) ?? "null") as unknown;
|
||||
if (stored && typeof stored === "object") {
|
||||
return { ...defaultAiSettings(), ...(stored as Partial<AiSettings>) };
|
||||
}
|
||||
} catch {
|
||||
// Fall through to defaults below.
|
||||
}
|
||||
return defaultAiSettings();
|
||||
}
|
||||
|
||||
function persistAiSettings(next: AiSettings) {
|
||||
try {
|
||||
localStorage.setItem(AI_SETTINGS_KEY, JSON.stringify(next));
|
||||
} catch {
|
||||
// Local storage is best-effort only; AI generation must keep working without it.
|
||||
}
|
||||
}
|
||||
|
||||
function rememberRecentRepo(path: string) {
|
||||
recentRepoPaths = uniqueRepoPaths([path, ...recentRepoPaths]).slice(0, 40);
|
||||
persistRepoLists();
|
||||
@@ -1742,11 +1838,13 @@
|
||||
{isBusy}
|
||||
{operation}
|
||||
{stagedCount}
|
||||
commitAiProvider={aiSettings.provider}
|
||||
{commitAiPhase}
|
||||
{commitAiGenerating}
|
||||
onCommit={commitChanges}
|
||||
onCommitMessageChange={(msg) => { commitMessage = msg; }}
|
||||
onGenerateCommitMessage={generateCommitMessageWithAi}
|
||||
onOpenAiSettings={() => { aiSettingsOpen = true; }}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1850,6 +1948,16 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Choose the AI provider/model used to generate commit messages -->
|
||||
{#if aiSettingsOpen}
|
||||
<AiSettingsDialog
|
||||
settings={aiSettings}
|
||||
localModels={localModelOptions}
|
||||
onSave={saveAiSettings}
|
||||
onClose={() => { aiSettingsOpen = false; }}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Compare: pick the two commits to diff -->
|
||||
{#if compareSelectOpen}
|
||||
<CompareSelectDialog
|
||||
|
||||
+43
@@ -1334,6 +1334,7 @@
|
||||
.commit-form textarea { flex: 1 1 0; min-height: 80px; resize: none; }
|
||||
.commit-actions-row { display: flex; gap: 8px; }
|
||||
.commit-ai-button { flex: 0 0 auto; min-width: 64px; justify-content: center; }
|
||||
.commit-ai-settings-button { flex: 0 0 auto; width: 38px; min-width: 38px; padding: 0; justify-content: center; }
|
||||
.commit-block-reason {
|
||||
margin: 0;
|
||||
padding: 8px 10px;
|
||||
@@ -1605,6 +1606,48 @@
|
||||
max-height: calc(100vh - 32px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ai-settings-dialog {
|
||||
display: block;
|
||||
width: min(560px, calc(100vw - 32px));
|
||||
height: auto;
|
||||
max-height: calc(100vh - 32px);
|
||||
overflow: auto;
|
||||
}
|
||||
.ai-settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
.ai-provider-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.ai-provider-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-height: 38px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
color: var(--color-ink-dim);
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ai-provider-option:hover {
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-ink);
|
||||
background: var(--color-surface-hover);
|
||||
}
|
||||
.ai-provider-option.active {
|
||||
border-color: rgba(100,108,255,0.5);
|
||||
color: #f5f7ff;
|
||||
background: linear-gradient(180deg, rgba(100,108,255,0.22), rgba(65,209,255,0.1));
|
||||
}
|
||||
.new-branch-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { AlertCircle, Bot, Check, Cpu, Eye, EyeOff, Globe, Key, LoaderCircle, X } from "@lucide/svelte";
|
||||
import { credDelete, credLoad, credSave } from "../git";
|
||||
import type { AiSettings, CommitAiProvider, LocalModelOption } from "../types";
|
||||
|
||||
interface Props {
|
||||
settings: AiSettings;
|
||||
localModels: LocalModelOption[];
|
||||
onSave: (settings: AiSettings) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { settings, localModels = [], onSave, onClose }: Props = $props();
|
||||
|
||||
type CloudProvider = Exclude<CommitAiProvider, "local">;
|
||||
|
||||
const CRED_KEYS: Record<CloudProvider, string> = {
|
||||
openai: "ai:openai",
|
||||
anthropic: "ai:anthropic",
|
||||
custom: "ai:custom",
|
||||
};
|
||||
|
||||
let provider = $state<CommitAiProvider>("local");
|
||||
let localModelId = $state("");
|
||||
let openaiModel = $state("");
|
||||
let anthropicModel = $state("");
|
||||
let customBaseUrl = $state("");
|
||||
let customModel = $state("");
|
||||
|
||||
let openaiApiKey = $state("");
|
||||
let anthropicApiKey = $state("");
|
||||
let customApiKey = $state("");
|
||||
let showKey = $state(false);
|
||||
let loadingKeys = $state(true);
|
||||
let saving = $state(false);
|
||||
let error = $state("");
|
||||
|
||||
$effect(() => {
|
||||
provider = settings.provider;
|
||||
localModelId = settings.localModelId;
|
||||
openaiModel = settings.openaiModel;
|
||||
anthropicModel = settings.anthropicModel;
|
||||
customBaseUrl = settings.customBaseUrl;
|
||||
customModel = settings.customModel;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const [openai, anthropic, custom] = await Promise.all([
|
||||
credLoad(CRED_KEYS.openai),
|
||||
credLoad(CRED_KEYS.anthropic),
|
||||
credLoad(CRED_KEYS.custom),
|
||||
]);
|
||||
openaiApiKey = openai?.password ?? "";
|
||||
anthropicApiKey = anthropic?.password ?? "";
|
||||
customApiKey = custom?.password ?? "";
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : String(err);
|
||||
} finally {
|
||||
loadingKeys = false;
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
async function persistKey(target: CloudProvider, value: string) {
|
||||
const key = CRED_KEYS[target];
|
||||
const trimmed = value.trim();
|
||||
if (trimmed) {
|
||||
await credSave(key, "api-key", trimmed, null);
|
||||
} else {
|
||||
await credDelete(key);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
saving = true;
|
||||
error = "";
|
||||
try {
|
||||
await Promise.all([
|
||||
persistKey("openai", openaiApiKey),
|
||||
persistKey("anthropic", anthropicApiKey),
|
||||
persistKey("custom", customApiKey),
|
||||
]);
|
||||
onSave({
|
||||
provider,
|
||||
localModelId,
|
||||
openaiModel: openaiModel.trim() || "gpt-4o-mini",
|
||||
anthropicModel: anthropicModel.trim() || "claude-3-5-haiku-latest",
|
||||
customBaseUrl: customBaseUrl.trim(),
|
||||
customModel: customModel.trim(),
|
||||
});
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : String(err);
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatSize(mb: number): string {
|
||||
return mb >= 1000 ? `${(mb / 1000).toFixed(1)} GB` : `${mb} MB`;
|
||||
}
|
||||
|
||||
let selectedLocalModel = $derived(localModels.find((option) => option.id === localModelId));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="dialog-backdrop"
|
||||
role="presentation"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div class="dialog ai-settings-dialog" role="dialog" aria-modal="true" aria-label="AI settings" tabindex="-1">
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">Commit AI</span>
|
||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">AI settings</h2>
|
||||
</div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} title="Close">
|
||||
<X size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<form class="ai-settings-form" onsubmit={(e) => { e.preventDefault(); void handleSave(); }}>
|
||||
<div class="ai-provider-options" role="radiogroup" aria-label="AI provider">
|
||||
<button type="button" class="ai-provider-option" class:active={provider === "local"} onclick={() => { provider = "local"; }}>
|
||||
<Cpu size={16} aria-hidden="true" />
|
||||
Local AI
|
||||
</button>
|
||||
<button type="button" class="ai-provider-option" class:active={provider === "openai"} onclick={() => { provider = "openai"; }}>
|
||||
<Bot size={16} aria-hidden="true" />
|
||||
OpenAI
|
||||
</button>
|
||||
<button type="button" class="ai-provider-option" class:active={provider === "anthropic"} onclick={() => { provider = "anthropic"; }}>
|
||||
<Bot size={16} aria-hidden="true" />
|
||||
Anthropic (Claude)
|
||||
</button>
|
||||
<button type="button" class="ai-provider-option" class:active={provider === "custom"} onclick={() => { provider = "custom"; }}>
|
||||
<Globe size={16} aria-hidden="true" />
|
||||
Custom endpoint
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if provider === "local"}
|
||||
<label class="cred-field">
|
||||
<span class="cred-field-label">Model</span>
|
||||
<select bind:value={localModelId}>
|
||||
{#each localModels as option (option.id)}
|
||||
<option value={option.id}>{option.label} — {formatSize(option.approx_size_mb)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<div class="cred-token-hint">
|
||||
<AlertCircle size={13} aria-hidden="true" />
|
||||
<span>
|
||||
Beim Wechsel wird das Modell{selectedLocalModel ? ` (${formatSize(selectedLocalModel.approx_size_mb)})` : ""}
|
||||
im Hintergrund heruntergeladen — je nach Internetverbindung kann das mehrere Minuten dauern.
|
||||
Danach bleibt es lokal zwischengespeichert und lädt beim nächsten Start sofort.
|
||||
</span>
|
||||
</div>
|
||||
{:else if provider === "openai"}
|
||||
<label class="cred-field">
|
||||
<span class="cred-field-label">Model</span>
|
||||
<input type="text" bind:value={openaiModel} placeholder="gpt-4o-mini" autocomplete="off" spellcheck="false" />
|
||||
</label>
|
||||
<div class="cred-field">
|
||||
<span class="cred-field-label">API key</span>
|
||||
<div class="cred-input">
|
||||
<Key size={15} class="cred-field-icon" aria-hidden="true" />
|
||||
<input
|
||||
type={showKey ? "text" : "password"}
|
||||
bind:value={openaiApiKey}
|
||||
placeholder="sk-..."
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
disabled={loadingKeys}
|
||||
/>
|
||||
<button type="button" class="cred-reveal" tabindex="-1" onclick={() => { showKey = !showKey; }} aria-label={showKey ? "Hide" : "Show"}>
|
||||
{#if showKey}<EyeOff size={14} aria-hidden="true" />{:else}<Eye size={14} aria-hidden="true" />{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if provider === "anthropic"}
|
||||
<label class="cred-field">
|
||||
<span class="cred-field-label">Model</span>
|
||||
<input type="text" bind:value={anthropicModel} placeholder="claude-3-5-haiku-latest" autocomplete="off" spellcheck="false" />
|
||||
</label>
|
||||
<div class="cred-field">
|
||||
<span class="cred-field-label">API key</span>
|
||||
<div class="cred-input">
|
||||
<Key size={15} class="cred-field-icon" aria-hidden="true" />
|
||||
<input
|
||||
type={showKey ? "text" : "password"}
|
||||
bind:value={anthropicApiKey}
|
||||
placeholder="sk-ant-..."
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
disabled={loadingKeys}
|
||||
/>
|
||||
<button type="button" class="cred-reveal" tabindex="-1" onclick={() => { showKey = !showKey; }} aria-label={showKey ? "Hide" : "Show"}>
|
||||
{#if showKey}<EyeOff size={14} aria-hidden="true" />{:else}<Eye size={14} aria-hidden="true" />{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<label class="cred-field">
|
||||
<span class="cred-field-label">Endpoint URL</span>
|
||||
<input type="text" bind:value={customBaseUrl} placeholder="http://localhost:11434/v1" autocomplete="off" spellcheck="false" />
|
||||
</label>
|
||||
<label class="cred-field">
|
||||
<span class="cred-field-label">Model</span>
|
||||
<input type="text" bind:value={customModel} placeholder="llama3.1" autocomplete="off" spellcheck="false" />
|
||||
</label>
|
||||
<div class="cred-field">
|
||||
<span class="cred-field-label">API key (optional)</span>
|
||||
<div class="cred-input">
|
||||
<Key size={15} class="cred-field-icon" aria-hidden="true" />
|
||||
<input
|
||||
type={showKey ? "text" : "password"}
|
||||
bind:value={customApiKey}
|
||||
placeholder="Optional"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
disabled={loadingKeys}
|
||||
/>
|
||||
<button type="button" class="cred-reveal" tabindex="-1" onclick={() => { showKey = !showKey; }} aria-label={showKey ? "Hide" : "Show"}>
|
||||
{#if showKey}<EyeOff size={14} aria-hidden="true" />{:else}<Eye size={14} aria-hidden="true" />{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cred-token-hint">
|
||||
<Globe size={13} aria-hidden="true" />
|
||||
<span>Für lokale OpenAI-kompatible Server wie Ollama oder LM Studio. Die Basis-URL sollte auf /v1 enden.</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<p class="commit-block-reason">{error}</p>
|
||||
{/if}
|
||||
|
||||
<div class="new-branch-actions">
|
||||
<button class="btn-secondary" type="button" onclick={onClose} disabled={saving}>
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn-primary" type="submit" disabled={saving || loadingKeys}>
|
||||
{#if saving}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<Check size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Check, LoaderCircle, Sparkles } from "@lucide/svelte";
|
||||
import type { CommitAiPhase } from "../types";
|
||||
import { Check, LoaderCircle, Settings, Sparkles } from "@lucide/svelte";
|
||||
import type { CommitAiPhase, CommitAiProvider } from "../types";
|
||||
|
||||
interface Props {
|
||||
commitMessage: string;
|
||||
@@ -10,11 +10,13 @@
|
||||
isBusy: boolean;
|
||||
operation: string;
|
||||
stagedCount: number;
|
||||
commitAiProvider: CommitAiProvider;
|
||||
commitAiPhase: CommitAiPhase;
|
||||
commitAiGenerating: boolean;
|
||||
onCommit: () => void;
|
||||
onCommitMessageChange: (msg: string) => void;
|
||||
onGenerateCommitMessage: () => void;
|
||||
onOpenAiSettings: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -25,11 +27,13 @@
|
||||
isBusy = false,
|
||||
operation = "",
|
||||
stagedCount = 0,
|
||||
commitAiProvider = "local",
|
||||
commitAiPhase = "idle",
|
||||
commitAiGenerating = false,
|
||||
onCommit = () => {},
|
||||
onCommitMessageChange = () => {},
|
||||
onGenerateCommitMessage = () => {},
|
||||
onOpenAiSettings = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
function handleSubmit(event: SubmitEvent) {
|
||||
@@ -37,15 +41,20 @@
|
||||
onCommit();
|
||||
}
|
||||
|
||||
function aiButtonTitle(phase: CommitAiPhase, staged: number): string {
|
||||
if (phase === "loading") return "AI model is downloading/loading — this happens once";
|
||||
if (phase === "error") return "AI model failed to load";
|
||||
function aiButtonTitle(provider: CommitAiProvider, phase: CommitAiPhase, staged: number): string {
|
||||
if (staged === 0) return "Stage changes first";
|
||||
if (provider === "local" && phase === "loading") return "AI model is downloading/loading — this happens once";
|
||||
if (provider === "local" && phase === "error") return "AI model failed to load — check AI settings";
|
||||
return "Generate commit message with AI from the staged diff";
|
||||
}
|
||||
|
||||
let localModelLoading = $derived(commitAiProvider === "local" && commitAiPhase === "loading");
|
||||
let canGenerate = $derived(
|
||||
hasRepository && !isBusy && !commitAiGenerating && commitAiPhase === "ready" && stagedCount > 0,
|
||||
hasRepository &&
|
||||
!isBusy &&
|
||||
!commitAiGenerating &&
|
||||
stagedCount > 0 &&
|
||||
(commitAiProvider !== "local" || commitAiPhase === "ready"),
|
||||
);
|
||||
</script>
|
||||
|
||||
@@ -82,15 +91,25 @@
|
||||
type="button"
|
||||
onclick={onGenerateCommitMessage}
|
||||
disabled={!canGenerate}
|
||||
title={aiButtonTitle(commitAiPhase, stagedCount)}
|
||||
title={aiButtonTitle(commitAiProvider, commitAiPhase, stagedCount)}
|
||||
>
|
||||
{#if commitAiGenerating || commitAiPhase === "loading"}
|
||||
{#if commitAiGenerating || localModelLoading}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<Sparkles size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
AI
|
||||
</button>
|
||||
<button
|
||||
class="btn-secondary commit-ai-settings-button"
|
||||
type="button"
|
||||
onclick={onOpenAiSettings}
|
||||
disabled={isBusy}
|
||||
title="AI settings"
|
||||
aria-label="AI settings"
|
||||
>
|
||||
<Settings size={16} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
+27
-2
@@ -1,6 +1,7 @@
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
import type {
|
||||
CommitAiProvider,
|
||||
CommitAiStatus,
|
||||
ConflictFile,
|
||||
GitBranch,
|
||||
@@ -9,6 +10,7 @@ import type {
|
||||
GitRepositoryFile,
|
||||
GitSearchHit,
|
||||
GitStatus,
|
||||
LocalModelOption,
|
||||
PatchApplyAction,
|
||||
RepositoryBundle,
|
||||
StoredCredential,
|
||||
@@ -99,8 +101,31 @@ export function commitAiStatus(): Promise<CommitAiStatus> {
|
||||
return invoke<CommitAiStatus>("commit_ai_status");
|
||||
}
|
||||
|
||||
export function commitAiGenerate(path: string, notes?: string): Promise<string> {
|
||||
return invoke<string>("commit_ai_generate", { path, notes });
|
||||
export function commitAiLoad(modelId: string): Promise<void> {
|
||||
return invoke<void>("commit_ai_load", { modelId });
|
||||
}
|
||||
|
||||
export function commitAiLocalModels(): Promise<LocalModelOption[]> {
|
||||
return invoke<LocalModelOption[]>("commit_ai_local_models");
|
||||
}
|
||||
|
||||
export interface CommitAiGenerateOptions {
|
||||
notes?: string;
|
||||
provider: CommitAiProvider;
|
||||
model?: string;
|
||||
apiKey?: string;
|
||||
baseUrl?: string;
|
||||
}
|
||||
|
||||
export function commitAiGenerate(path: string, options: CommitAiGenerateOptions): Promise<string> {
|
||||
return invoke<string>("commit_ai_generate", {
|
||||
path,
|
||||
notes: options.notes,
|
||||
provider: options.provider,
|
||||
model: options.model,
|
||||
apiKey: options.apiKey,
|
||||
baseUrl: options.baseUrl,
|
||||
});
|
||||
}
|
||||
|
||||
export function pull(path: string, username?: string, password?: string): Promise<GitStatus> {
|
||||
|
||||
@@ -8,12 +8,29 @@ export type FileStatusKind =
|
||||
| "unknown";
|
||||
|
||||
export type CommitAiPhase = "idle" | "loading" | "ready" | "error";
|
||||
export type CommitAiProvider = "local" | "openai" | "anthropic" | "custom";
|
||||
|
||||
export interface CommitAiStatus {
|
||||
phase: CommitAiPhase;
|
||||
model_id: string | null;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface LocalModelOption {
|
||||
id: string;
|
||||
label: string;
|
||||
approx_size_mb: number;
|
||||
}
|
||||
|
||||
export interface AiSettings {
|
||||
provider: CommitAiProvider;
|
||||
localModelId: string;
|
||||
openaiModel: string;
|
||||
anthropicModel: string;
|
||||
customBaseUrl: string;
|
||||
customModel: string;
|
||||
}
|
||||
|
||||
export interface GitStatus {
|
||||
repo_path: string;
|
||||
current_branch: string | null;
|
||||
|
||||
Reference in New Issue
Block a user