<script lang="ts">
import { createInsight } from '../api/endpoints.ts';
import { getBaseUrl } from '../stores/connection.svelte.ts';
import type { CreateInsightResponse } from '../api/types.ts';
let text = $state('');
let tagsInput = $state('');
let submitting = $state(false);
let result: CreateInsightResponse | null = $state(null);
let errorMsg: string | null = $state(null);
let { oncreated }: { oncreated?: (id: string) => void } = $props();
async function handleSubmit(e: Event) {
e.preventDefault();
if (!text.trim() || submitting) return;
submitting = true;
errorMsg = null;
result = null;
try {
const tags = tagsInput.trim()
? tagsInput.split(',').map(t => t.trim()).filter(t => t.length > 0)
: undefined;
const res = await createInsight(getBaseUrl(), text.trim(), tags);
if (res.error) {
errorMsg = res.error;
} else {
result = res;
text = '';
tagsInput = '';
oncreated?.(res.id);
}
} catch (e) {
errorMsg = e instanceof Error ? e.message : 'Failed to create insight';
} finally {
submitting = false;
}
}
</script>
<form onsubmit={handleSubmit} class="space-y-3">
<textarea
bind:value={text}
placeholder="Share an insight... e.g., 'We prefer composition over inheritance for payment strategies'"
rows="3"
class="w-full bg-[var(--color-surface-container-lowest)] border border-[var(--color-outline-variant)]
rounded-lg px-3 py-2 text-sm text-[var(--color-on-surface)] placeholder:text-[var(--color-on-surface-variant)]/50
focus:outline-none focus:border-[var(--color-primary)] resize-none"
></textarea>
<input
type="text"
bind:value={tagsInput}
placeholder="Tags (comma-separated, optional)"
class="w-full bg-[var(--color-surface-container-lowest)] border border-[var(--color-outline-variant)]
rounded-lg px-3 py-2 text-sm text-[var(--color-on-surface)] placeholder:text-[var(--color-on-surface-variant)]/50
focus:outline-none focus:border-[var(--color-primary)]"
/>
{#if errorMsg}
<p class="text-xs text-[var(--color-error)]">{errorMsg}</p>
{/if}
<button
type="submit"
disabled={!text.trim() || submitting}
class="w-full py-2 rounded-lg text-sm font-bold transition-colors
bg-[var(--color-primary)] text-[var(--color-on-primary)]
disabled:opacity-40 disabled:cursor-not-allowed
hover:bg-[var(--color-primary-container)] hover:text-[var(--color-on-primary-container)]"
>
{submitting ? 'Creating...' : 'Add Insight'}
</button>
{#if result}
<div class="mt-3 p-3 rounded-lg bg-[var(--color-surface-container-low)] border border-[var(--color-outline-variant)]/30">
<p class="text-xs font-bold text-[var(--color-on-surface)] mb-1">
Created: <span class="font-mono text-[var(--color-insight)]">{result.id}</span>
</p>
{#if (result.auto_links?.length ?? 0) > 0}
<p class="text-[10px] uppercase tracking-wider text-[var(--color-on-surface-variant)] mt-2 mb-1">Auto-detected links</p>
<div class="flex flex-wrap gap-1">
{#each result.auto_links as link}
<span class="text-[10px] px-1.5 py-0.5 rounded
bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-variant)]">
{link.entity_id}
<span class="opacity-60">({link.link_type})</span>
</span>
{/each}
</div>
{/if}
</div>
{/if}
</form>