v0.2.0-llm: LLM integration, core utilities, and persistence
- Rust backend: LLM abstraction with OpenAI-compatible + Ollama API clients - Tauri commands: generate, generate_stream, get/set LLM config - LLM config: api_url, api_key, model, temperature, max_tokens, top_p - Works with Ollama (localhost:11434), LM Studio, any OpenAI-compatible API - Streaming infrastructure via Tauri Channels (LlmEvent) - tauri-plugin-store, tauri-plugin-fs added - Frontend: NPC Generator with race/class/alignment selection + AI generation - Frontend: Dice Roller with notation parsing (2d6+3), presets, history - Frontend: Session Logger with note-taking + AI summarization - Frontend: Settings panel for LLM configuration (URL, key, model, temperature) - App shell: left rail nav with active states, settings toggle - All glassmorphism cards with gold glow hover states - Builds clean: tsc, vite build, cargo check, tauri build
This commit is contained in:
itsamejms
+30
-8
@@ -8,7 +8,11 @@ import {
|
||||
Settings,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Dashboard } from "./components/Dashboard";
|
||||
import { SettingsPanel } from "./components/SettingsPanel";
|
||||
|
||||
type View = "dashboard" | "settings";
|
||||
|
||||
const navItems = [
|
||||
{ icon: Map, label: "World" },
|
||||
@@ -17,24 +21,34 @@ const navItems = [
|
||||
{ icon: Dice5, label: "Dice" },
|
||||
{ icon: ScrollText, label: "Session" },
|
||||
{ icon: Volume2, label: "Sound" },
|
||||
{ icon: Settings, label: "Settings" },
|
||||
];
|
||||
|
||||
export default function App() {
|
||||
const [view, setView] = useState<View>("dashboard");
|
||||
const [activeNav, setActiveNav] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-screen overflow-hidden bg-[var(--color-bg-deep)]">
|
||||
{/* Left Rail */}
|
||||
<nav className="flex flex-col items-center w-14 bg-[var(--color-bg-surface)] border-r border-[var(--color-border-subtle)] py-3 gap-1 shrink-0">
|
||||
{/* App Logo */}
|
||||
<div className="w-8 h-8 rounded-lg bg-[var(--color-gold-bright)] flex items-center justify-center mb-4 text-[var(--color-bg-deep)] font-heading font-bold text-lg">
|
||||
<button
|
||||
onClick={() => setView("dashboard")}
|
||||
className="w-8 h-8 rounded-lg bg-[var(--color-gold-bright)] flex items-center justify-center mb-4 text-[var(--color-bg-deep)] font-heading font-bold text-lg cursor-pointer"
|
||||
title="DM-Pal"
|
||||
>
|
||||
⚔
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{navItems.map((item, i) => (
|
||||
<button
|
||||
key={item.label}
|
||||
onClick={() => {
|
||||
setActiveNav(i);
|
||||
setView("dashboard");
|
||||
}}
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
|
||||
i === 0
|
||||
i === activeNav && view === "dashboard"
|
||||
? "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)]"
|
||||
: "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)]"
|
||||
}`}
|
||||
@@ -49,7 +63,12 @@ export default function App() {
|
||||
|
||||
{/* Settings at bottom */}
|
||||
<button
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)] transition-colors cursor-pointer"
|
||||
onClick={() => setView(view === "settings" ? "dashboard" : "settings")}
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
|
||||
view === "settings"
|
||||
? "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)]"
|
||||
: "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)]"
|
||||
}`}
|
||||
title="Settings"
|
||||
>
|
||||
<Settings size={18} />
|
||||
@@ -59,7 +78,10 @@ export default function App() {
|
||||
{/* Main Content Area */}
|
||||
<div className="flex flex-col flex-1 overflow-hidden">
|
||||
{/* Title Bar */}
|
||||
<header className="flex items-center h-10 px-4 bg-[var(--color-bg-surface)] border-b border-[var(--color-border-subtle)] shrink-0" data-tauri-drag-region>
|
||||
<header
|
||||
className="flex items-center h-10 px-4 bg-[var(--color-bg-surface)] border-b border-[var(--color-border-subtle)] shrink-0"
|
||||
data-tauri-drag-region
|
||||
>
|
||||
<span className="font-heading text-[var(--color-gold-bright)] text-base font-bold tracking-wider">
|
||||
DM-Pal
|
||||
</span>
|
||||
@@ -69,9 +91,9 @@ export default function App() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Dashboard */}
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
<Dashboard />
|
||||
{view === "dashboard" ? <Dashboard /> : <SettingsPanel />}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,14 +4,15 @@ import {
|
||||
Swords,
|
||||
ScrollText,
|
||||
Dice5,
|
||||
Sparkles,
|
||||
Timer,
|
||||
GitBranch,
|
||||
Volume2,
|
||||
Calendar,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { BentoCard } from "./BentoCard";
|
||||
import { Greet } from "./Greet";
|
||||
import { NpcGenerator } from "./NpcGenerator";
|
||||
import { DiceRoller } from "./DiceRoller";
|
||||
import { SessionLogger } from "./SessionLogger";
|
||||
|
||||
export function Dashboard() {
|
||||
return (
|
||||
@@ -19,22 +20,22 @@ export function Dashboard() {
|
||||
{/* World Map — 2×2 */}
|
||||
<BentoCard title="World Map" icon={<Map size={16} />} span="col-span-2 row-span-2">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Map canvas placeholder
|
||||
<div className="text-center">
|
||||
<Map size={48} className="mx-auto mb-2 opacity-30" />
|
||||
<p>Map canvas coming soon</p>
|
||||
<p className="text-xs mt-1">react-konva integration pending</p>
|
||||
</div>
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* NPC Sheet — 1×1 */}
|
||||
<BentoCard title="NPC Sheet" icon={<User size={16} />} span="col-span-1 row-span-1">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
NPC generator placeholder
|
||||
</div>
|
||||
<NpcGenerator />
|
||||
</BentoCard>
|
||||
|
||||
{/* Dice Roller — 1×1 */}
|
||||
<BentoCard title="Dice Roller" icon={<Dice5 size={16} />} span="col-span-1 row-span-1">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Dice roller placeholder
|
||||
</div>
|
||||
<DiceRoller />
|
||||
</BentoCard>
|
||||
|
||||
{/* Encounter Builder — 1×1 */}
|
||||
@@ -44,7 +45,7 @@ export function Dashboard() {
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Encounter builder placeholder
|
||||
Encounter builder coming soon
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
@@ -54,26 +55,24 @@ export function Dashboard() {
|
||||
icon={<ScrollText size={16} />}
|
||||
span="col-span-2 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Session log placeholder
|
||||
</div>
|
||||
<SessionLogger />
|
||||
</BentoCard>
|
||||
|
||||
{/* Quest Designer — 2×1 */}
|
||||
<BentoCard
|
||||
title="Quest Designer"
|
||||
icon={<GitBranch size={16} />}
|
||||
icon={<Sparkles size={16} />}
|
||||
span="col-span-2 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Quest designer placeholder
|
||||
Quest flowchart coming soon
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Initiative Tracker — 1×1 */}
|
||||
<BentoCard title="Initiative" icon={<Timer size={16} />} span="col-span-1 row-span-1">
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Initiative tracker placeholder
|
||||
Combat tracker coming soon
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
@@ -84,19 +83,10 @@ export function Dashboard() {
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Random tables placeholder
|
||||
Random tables coming soon
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
{/* Greeting / LLM Test — spans bottom area */}
|
||||
<BentoCard
|
||||
title="DM-Pal"
|
||||
icon={<Volume2 size={16} />}
|
||||
span="col-span-2 row-span-1"
|
||||
>
|
||||
<Greet />
|
||||
</BentoCard>
|
||||
|
||||
{/* Calendar — 1×1 */}
|
||||
<BentoCard
|
||||
title="Calendar"
|
||||
@@ -104,7 +94,7 @@ export function Dashboard() {
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Calendar placeholder
|
||||
Calendar coming soon
|
||||
</div>
|
||||
</BentoCard>
|
||||
|
||||
@@ -115,7 +105,7 @@ export function Dashboard() {
|
||||
span="col-span-1 row-span-1"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full text-[var(--color-text-dim)] text-sm">
|
||||
Soundboard placeholder
|
||||
Soundboard coming soon
|
||||
</div>
|
||||
</BentoCard>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
import { useState, useCallback } from "react";
|
||||
|
||||
interface DieResult {
|
||||
notation: string;
|
||||
rolls: number[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
const PRESETS = ["d4", "d6", "d8", "d10", "d12", "d20", "d100"];
|
||||
|
||||
function rollDie(sides: number): number {
|
||||
return Math.floor(Math.random() * sides) + 1;
|
||||
}
|
||||
|
||||
function parseNotation(notation: string): { count: number; sides: number; modifier: number } | null {
|
||||
const match = notation.trim().toLowerCase().match(/^(\d+)?d(\d+)([+-]\d+)?$/);
|
||||
if (!match) return null;
|
||||
return {
|
||||
count: parseInt(match[1] || "1"),
|
||||
sides: parseInt(match[2]),
|
||||
modifier: parseInt(match[3] || "0"),
|
||||
};
|
||||
}
|
||||
|
||||
export function DiceRoller() {
|
||||
const [input, setInput] = useState("1d20");
|
||||
const [results, setResults] = useState<DieResult[]>([]);
|
||||
const [lastTotal, setLastTotal] = useState<number | null>(null);
|
||||
|
||||
const roll = useCallback(() => {
|
||||
const parsed = parseNotation(input);
|
||||
if (!parsed || parsed.sides < 2 || parsed.count > 100) return;
|
||||
|
||||
const rolls = Array.from({ length: parsed.count }, () => rollDie(parsed.sides));
|
||||
const sum = rolls.reduce((a, b) => a + b, 0) + parsed.modifier;
|
||||
const result: DieResult = {
|
||||
notation: input.trim(),
|
||||
rolls,
|
||||
total: sum,
|
||||
};
|
||||
|
||||
setResults((prev) => [result, ...prev].slice(0, 50));
|
||||
setLastTotal(sum);
|
||||
}, [input]);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") roll();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 h-full">
|
||||
{/* Big result display */}
|
||||
<div className="flex items-center justify-center py-3">
|
||||
<span className="font-mono text-3xl font-bold text-[var(--color-gold-bright)]">
|
||||
{lastTotal !== null ? lastTotal : "—"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Input row */}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="flex-1 rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm font-mono"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="2d6+3"
|
||||
/>
|
||||
<button
|
||||
onClick={roll}
|
||||
className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer"
|
||||
>
|
||||
Roll
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Quick dice */}
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{PRESETS.map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
onClick={() => {
|
||||
const parsed = parseNotation(`1${d}`);
|
||||
if (!parsed) return;
|
||||
const rolls = [rollDie(parsed.sides)];
|
||||
const total = rolls[0] + parsed.modifier;
|
||||
setResults((prev) => [{ notation: `1${d}`, rolls, total }, ...prev].slice(0, 50));
|
||||
setLastTotal(total);
|
||||
}}
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1 text-xs text-[var(--color-text-secondary)] hover:border-[var(--color-gold-bright)] hover:text-[var(--color-gold-bright)] transition-colors cursor-pointer font-mono"
|
||||
>
|
||||
{d}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* History */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="flex flex-col gap-1">
|
||||
{results.map((r, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] px-3 py-1.5"
|
||||
>
|
||||
<span className="font-mono text-xs text-[var(--color-text-secondary)]">
|
||||
{r.notation}
|
||||
{r.rolls.length > 1 && ` [${r.rolls.join(", ")}]`}
|
||||
</span>
|
||||
<span className="font-mono text-sm font-bold text-[var(--color-gold-bright)]">
|
||||
{r.total}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
interface NpcResponse {
|
||||
bio: string;
|
||||
personality: string[];
|
||||
goals: string[];
|
||||
}
|
||||
|
||||
const RACES = ["Human", "Elf", "Dwarf", "Halfling", "Orc", "Tiefling", "Dragonborn", "Gnome"];
|
||||
const ALIGNMENTS = ["Lawful Good", "Neutral Good", "Chaotic Good", "Lawful Neutral", "True Neutral", "Chaotic Neutral", "Lawful Evil", "Neutral Evil", "Chaotic Evil"];
|
||||
|
||||
export function NpcGenerator() {
|
||||
const [race, setRace] = useState("Dwarf");
|
||||
const [charClass, setCharClass] = useState("Artisan");
|
||||
const [alignment, setAlignment] = useState("Chaotic Good");
|
||||
const [name, setName] = useState("");
|
||||
const [npc, setNpc] = useState<NpcResponse | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function generate() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setNpc(null);
|
||||
try {
|
||||
const prompt = `Create a detailed NPC for a fantasy RPG:
|
||||
${name ? `Name: ${name}` : "Name: (generate one)"}
|
||||
Race: ${race}
|
||||
Class: ${charClass}
|
||||
Alignment: ${alignment}
|
||||
|
||||
Provide the response as a JSON object with exactly these keys:
|
||||
- "bio": a 2-3 sentence backstory
|
||||
- "personality": an array of 3-5 personality traits
|
||||
- "goals": an array of 2-3 goals or motivations`;
|
||||
|
||||
const result = await invoke<string>("generate", {
|
||||
req: { prompt, system: "You are a creative D&D dungeon master. Always respond with valid JSON only.", temperature: 0.8, max_tokens: 512 },
|
||||
});
|
||||
|
||||
// Try to parse JSON from the response
|
||||
const jsonMatch = result.match(/\{[\s\S]*\}/);
|
||||
if (jsonMatch) {
|
||||
const parsed = JSON.parse(jsonMatch[0]) as NpcResponse;
|
||||
setNpc(parsed);
|
||||
} else {
|
||||
setError("LLM did not return valid JSON. Raw response:\n" + result);
|
||||
}
|
||||
} catch (e) {
|
||||
setError(String(e));
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 h-full overflow-y-auto">
|
||||
{/* Controls */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">Name</label>
|
||||
<input
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1.5 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Random"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">Race</label>
|
||||
<select
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1.5 text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm cursor-pointer"
|
||||
value={race}
|
||||
onChange={(e) => setRace(e.target.value)}
|
||||
>
|
||||
{RACES.map((r) => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">Class</label>
|
||||
<input
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1.5 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm"
|
||||
value={charClass}
|
||||
onChange={(e) => setCharClass(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">Alignment</label>
|
||||
<select
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1.5 text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm cursor-pointer"
|
||||
value={alignment}
|
||||
onChange={(e) => setAlignment(e.target.value)}
|
||||
>
|
||||
{ALIGNMENTS.map((a) => <option key={a} value={a}>{a}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={generate}
|
||||
disabled={loading}
|
||||
className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{loading ? "✨ Generating…" : "✨ Generate NPC"}
|
||||
</button>
|
||||
|
||||
{/* Result */}
|
||||
{error && (
|
||||
<div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-3 text-[var(--color-danger)] text-xs overflow-x-auto">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{npc && (
|
||||
<div className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-3 flex flex-col gap-2">
|
||||
<h3 className="font-heading text-[var(--color-gold-bright)] text-sm">
|
||||
{name || "NPC"}
|
||||
</h3>
|
||||
<p className="text-[var(--color-text-primary)] text-sm leading-relaxed">{npc.bio}</p>
|
||||
<div>
|
||||
<span className="text-[var(--color-text-secondary)] text-xs font-medium">Personality:</span>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{npc.personality?.map((p, i) => (
|
||||
<span key={i} className="rounded-full bg-[var(--color-gold-glow)] text-[var(--color-gold-bright)] px-2 py-0.5 text-xs">
|
||||
{p}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--color-text-secondary)] text-xs font-medium">Goals:</span>
|
||||
<ul className="list-disc list-inside text-[var(--color-text-primary)] text-xs mt-1">
|
||||
{npc.goals?.map((g, i) => <li key={i}>{g}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
export function SessionLogger() {
|
||||
const [notes, setNotes] = useState("");
|
||||
const [summary, setSummary] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [entries, setEntries] = useState<{ text: string; time: string }[]>([]);
|
||||
|
||||
function addEntry() {
|
||||
if (!notes.trim()) return;
|
||||
setEntries((prev) => [
|
||||
{ text: notes.trim(), time: new Date().toLocaleTimeString() },
|
||||
...prev,
|
||||
]);
|
||||
setNotes("");
|
||||
}
|
||||
|
||||
async function summarize() {
|
||||
if (entries.length === 0) return;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const sessionText = entries
|
||||
.map((e) => `[${e.time}] ${e.text}`)
|
||||
.join("\n");
|
||||
const result = await invoke<string>("generate", {
|
||||
req: {
|
||||
prompt: `Summarize the following D&D session notes and suggest 2-3 hooks for the next session:\n\n${sessionText}`,
|
||||
system: "You are a helpful D&D session summarizer. Be concise and creative.",
|
||||
temperature: 0.7,
|
||||
max_tokens: 512,
|
||||
},
|
||||
});
|
||||
setSummary(result);
|
||||
} catch (e) {
|
||||
setError(String(e));
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-3 h-full">
|
||||
{/* Notes column */}
|
||||
<div className="flex flex-col gap-2 flex-1">
|
||||
<textarea
|
||||
className="flex-1 rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-3 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm resize-none"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
addEntry();
|
||||
}
|
||||
}}
|
||||
placeholder="Type a session note, press Enter to add…"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={addEntry}
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-secondary)] px-3 py-1.5 text-xs hover:border-[var(--color-gold-bright)] hover:text-[var(--color-gold-bright)] transition-colors cursor-pointer"
|
||||
>
|
||||
Add Note
|
||||
</button>
|
||||
<button
|
||||
onClick={summarize}
|
||||
disabled={loading || entries.length === 0}
|
||||
className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-3 py-1.5 text-xs font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Summarizing…" : "✨ AI Summary"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{entries.map((e, i) => (
|
||||
<div key={i} className="flex gap-2 py-1 border-b border-[var(--color-border-subtle)]">
|
||||
<span className="text-[var(--color-text-dim)] text-xs font-mono shrink-0">
|
||||
{e.time}
|
||||
</span>
|
||||
<span className="text-[var(--color-text-primary)] text-xs">{e.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Summary column */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<h3 className="text-xs font-medium text-[var(--color-text-secondary)] mb-2">AI Summary</h3>
|
||||
{error && (
|
||||
<div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-2 text-[var(--color-danger)] text-xs mb-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-3 text-[var(--color-text-primary)] text-sm overflow-y-auto">
|
||||
{summary || (
|
||||
<span className="text-[var(--color-text-dim)] italic">
|
||||
Add session notes and click "AI Summary" to generate a recap and next-session hooks.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
interface LlmConfig {
|
||||
api_url: string;
|
||||
api_key: string;
|
||||
model: string;
|
||||
temperature: number;
|
||||
max_tokens: number;
|
||||
top_p: number;
|
||||
}
|
||||
|
||||
export function SettingsPanel() {
|
||||
const [config, setConfig] = useState<LlmConfig | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const c = await invoke<LlmConfig>("get_llm_config");
|
||||
setConfig(c);
|
||||
} catch (e) {
|
||||
console.error("Failed to load config:", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveConfig() {
|
||||
if (!config) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
await invoke("set_llm_config", { config });
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
} catch (e) {
|
||||
console.error("Failed to save config:", e);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4">
|
||||
<p className="text-[var(--color-text-secondary)] text-sm">
|
||||
Configure your LLM connection
|
||||
</p>
|
||||
<button
|
||||
onClick={loadConfig}
|
||||
className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer"
|
||||
>
|
||||
Load Settings
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 text-sm">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">
|
||||
API URL
|
||||
</label>
|
||||
<input
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)]"
|
||||
value={config.api_url}
|
||||
onChange={(e) => setConfig({ ...config, api_url: e.target.value })}
|
||||
placeholder="http://localhost:11434"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">
|
||||
API Key (optional)
|
||||
</label>
|
||||
<input
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)]"
|
||||
type="password"
|
||||
value={config.api_key}
|
||||
onChange={(e) => setConfig({ ...config, api_key: e.target.value })}
|
||||
placeholder="sk-... (leave blank for local)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">
|
||||
Model
|
||||
</label>
|
||||
<input
|
||||
className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)]"
|
||||
value={config.model}
|
||||
onChange={(e) => setConfig({ ...config, model: e.target.value })}
|
||||
placeholder="llama3.2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">
|
||||
Temperature: {config.temperature}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
step="0.1"
|
||||
value={config.temperature}
|
||||
onChange={(e) =>
|
||||
setConfig({ ...config, temperature: parseFloat(e.target.value) })
|
||||
}
|
||||
className="accent-[var(--color-gold-bright)]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[var(--color-text-secondary)] text-xs font-medium">
|
||||
Max Tokens: {config.max_tokens}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="64"
|
||||
max="4096"
|
||||
step="64"
|
||||
value={config.max_tokens}
|
||||
onChange={(e) =>
|
||||
setConfig({ ...config, max_tokens: parseInt(e.target.value) })
|
||||
}
|
||||
className="accent-[var(--color-gold-bright)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={saveConfig}
|
||||
disabled={loading}
|
||||
className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{saved ? "✓ Saved" : loading ? "Saving…" : "Save Settings"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user