mirror of
https://github.com/sortedcord/omnia.git
synced 2026-07-22 12:02:49 +05:30
refactor(builder): tab content out of page.tsx
This commit is contained in:
File diff suppressed because it is too large
Load Diff
149
apps/gui/src/components/builder/AttributeEditor.tsx
Normal file
149
apps/gui/src/components/builder/AttributeEditor.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import type { AttributeData } from "./types";
|
||||
|
||||
interface AttributeEditorProps {
|
||||
title?: string;
|
||||
attributes: AttributeData[];
|
||||
onChange: (attrs: AttributeData[]) => void;
|
||||
onAdd: () => void;
|
||||
entityIds: string[];
|
||||
}
|
||||
|
||||
export function AttributeEditor({
|
||||
title = "Attributes",
|
||||
attributes,
|
||||
onChange,
|
||||
onAdd,
|
||||
entityIds,
|
||||
}: AttributeEditorProps) {
|
||||
const handleAttrChange = <K extends keyof AttributeData>(
|
||||
index: number,
|
||||
key: K,
|
||||
val: AttributeData[K]
|
||||
) => {
|
||||
const copy = [...attributes];
|
||||
copy[index] = { ...copy[index], [key]: val };
|
||||
onChange(copy);
|
||||
};
|
||||
|
||||
const handleToggleEntityAccess = (index: number, entId: string) => {
|
||||
const copy = [...attributes];
|
||||
const allowed = copy[index].allowedEntities || [];
|
||||
if (allowed.includes(entId)) {
|
||||
copy[index].allowedEntities = allowed.filter((id) => id !== entId);
|
||||
} else {
|
||||
copy[index].allowedEntities = [...allowed, entId];
|
||||
}
|
||||
onChange(copy);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center border-b border-border/20 pb-2">
|
||||
<h3 className="text-body-md font-mono text-foreground font-bold">{title}</h3>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onAdd}
|
||||
className="h-7 text-xs flex gap-1 cursor-pointer"
|
||||
>
|
||||
<Plus className="size-3" /> Add Attribute
|
||||
</Button>
|
||||
</div>
|
||||
{attributes.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground italic">No attributes defined yet.</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{attributes.map((attr, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="border border-border/20 bg-secondary/10 p-3 rounded space-y-3"
|
||||
>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex-1 grid grid-cols-2 gap-2">
|
||||
<Input
|
||||
placeholder="Name (e.g. role)"
|
||||
value={attr.name}
|
||||
onChange={(e) => handleAttrChange(index, "name", e.target.value)}
|
||||
className="h-8 font-mono text-xs"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Value (e.g. merchant)"
|
||||
value={attr.value}
|
||||
onChange={(e) => handleAttrChange(index, "value", e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="size-8 shrink-0 cursor-pointer"
|
||||
onClick={() => onChange(attributes.filter((_, i) => i !== index))}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-muted-foreground cursor-pointer flex items-center gap-1.5">
|
||||
<Checkbox
|
||||
checked={attr.visibility === "PUBLIC"}
|
||||
onCheckedChange={(checked) =>
|
||||
handleAttrChange(
|
||||
index,
|
||||
"visibility",
|
||||
checked ? "PUBLIC" : "PRIVATE"
|
||||
)
|
||||
}
|
||||
/>
|
||||
Publicly Visible
|
||||
</Label>
|
||||
</div>
|
||||
{attr.visibility === "PRIVATE" && (
|
||||
<div className="flex-1 border-l border-border/25 pl-4">
|
||||
<span className="text-muted-foreground font-semibold block mb-1">
|
||||
Visible to Entities:
|
||||
</span>
|
||||
{entityIds.length === 0 ? (
|
||||
<span className="text-[10px] italic text-muted-foreground">
|
||||
Add entities first to grant private access
|
||||
</span>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{entityIds.map((entId) => {
|
||||
const isAllowed = attr.allowedEntities?.includes(entId);
|
||||
return (
|
||||
<button
|
||||
key={entId}
|
||||
type="button"
|
||||
onClick={() => handleToggleEntityAccess(index, entId)}
|
||||
className={`px-2 py-0.5 rounded text-[10px] font-mono border transition-all cursor-pointer ${
|
||||
isAllowed
|
||||
? "bg-primary/20 border-primary text-primary font-bold"
|
||||
: "bg-background border-border/30 text-muted-foreground hover:bg-secondary"
|
||||
}`}
|
||||
>
|
||||
{entId}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
507
apps/gui/src/components/builder/EntitiesTab.tsx
Normal file
507
apps/gui/src/components/builder/EntitiesTab.tsx
Normal file
@@ -0,0 +1,507 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { AttributeEditor } from "./AttributeEditor";
|
||||
import { Plus, Trash2, ChevronRight } from "lucide-react";
|
||||
import type { EntityData, MemoryData } from "./types";
|
||||
|
||||
interface EntitiesTabProps {
|
||||
entities: EntityData[];
|
||||
setEntities: (ents: EntityData[]) => void;
|
||||
locationIds: string[];
|
||||
entityIds: string[];
|
||||
selectedEntIndex: number;
|
||||
setSelectedEntIndex: (idx: number) => void;
|
||||
startTime: string;
|
||||
generateUUID: () => string;
|
||||
}
|
||||
|
||||
export function EntitiesTab({
|
||||
entities,
|
||||
setEntities,
|
||||
locationIds,
|
||||
entityIds,
|
||||
selectedEntIndex,
|
||||
setSelectedEntIndex,
|
||||
startTime,
|
||||
generateUUID,
|
||||
}: EntitiesTabProps) {
|
||||
const selectedEnt = entities[selectedEntIndex];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 items-start min-h-0">
|
||||
{/* Left sidebar: Entities list */}
|
||||
<div className="md:col-span-1 border border-border/20 bg-card shadow-[2px_2px_0_0_var(--border)] flex flex-col max-h-[500px]">
|
||||
<div className="p-3 border-b border-border/25 flex justify-between items-center bg-secondary/15">
|
||||
<strong className="text-xs font-mono uppercase tracking-wider text-muted-foreground">
|
||||
Entities
|
||||
</strong>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const newId = generateUUID();
|
||||
setEntities([
|
||||
...entities,
|
||||
{
|
||||
id: newId,
|
||||
locationId: locationIds[0],
|
||||
attributes: [],
|
||||
aliases: {},
|
||||
initialMemories: [],
|
||||
},
|
||||
]);
|
||||
setSelectedEntIndex(entities.length);
|
||||
}}
|
||||
className="h-6 text-[10px] px-2 flex gap-1 cursor-pointer"
|
||||
>
|
||||
<Plus className="size-3" /> Add
|
||||
</Button>
|
||||
</div>
|
||||
<div className="overflow-y-auto divide-y divide-border/10 flex-1">
|
||||
{entities.map((ent, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
onClick={() => setSelectedEntIndex(idx)}
|
||||
className={`p-3 text-xs font-mono cursor-pointer flex justify-between items-center transition-all ${
|
||||
selectedEntIndex === idx
|
||||
? "bg-primary/10 text-primary font-bold border-l-4 border-primary"
|
||||
: "hover:bg-secondary/40 text-foreground"
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{ent.id || `(Empty ID)`}</span>
|
||||
{entities.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const newEnts = entities.filter((_, i) => i !== idx);
|
||||
setEntities(newEnts);
|
||||
setSelectedEntIndex(Math.max(0, idx - 1));
|
||||
}}
|
||||
className="text-muted-foreground hover:text-destructive pl-2 cursor-pointer"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel: Edit selected entity details */}
|
||||
{selectedEnt ? (
|
||||
<div className="md:col-span-3 border border-border/20 bg-card p-6 shadow-[2px_2px_0_0_var(--border)] grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Column 1: ID, Location, Attributes */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-body-lg text-primary font-bold border-b border-border/20 pb-2">
|
||||
Entity Configuration
|
||||
</h2>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Entity ID</Label>
|
||||
<Input
|
||||
placeholder="e.g. alice"
|
||||
value={selectedEnt.id}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].id = e.target.value
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-_]/g, "");
|
||||
setEntities(copy);
|
||||
}}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Current Location</Label>
|
||||
<select
|
||||
className="bg-card border border-border/30 px-3 py-1.5 text-xs outline-none w-full rounded font-mono"
|
||||
value={selectedEnt.locationId || ""}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].locationId = e.target.value || undefined;
|
||||
setEntities(copy);
|
||||
}}
|
||||
>
|
||||
<option value="">-- No Location (floating) --</option>
|
||||
{locationIds.map((id) => (
|
||||
<option key={id} value={id}>
|
||||
{id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Attributes */}
|
||||
<div className="pt-2">
|
||||
<AttributeEditor
|
||||
title="Entity Attributes"
|
||||
attributes={selectedEnt.attributes || []}
|
||||
onChange={(newAttrs) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].attributes = newAttrs;
|
||||
setEntities(copy);
|
||||
}}
|
||||
onAdd={() => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].attributes = [
|
||||
...copy[selectedEntIndex].attributes,
|
||||
{ name: "", value: "", visibility: "PUBLIC", allowedEntities: [] },
|
||||
];
|
||||
setEntities(copy);
|
||||
}}
|
||||
entityIds={entityIds}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 2: Aliases and Initial Memories */}
|
||||
<div className="space-y-6 border-t lg:border-t-0 lg:border-l border-border/20 lg:pl-6 pt-4 lg:pt-0">
|
||||
{/* Aliases Section */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center border-b border-border/20 pb-2">
|
||||
<h3 className="text-body-md text-foreground font-bold">
|
||||
Aliases (Perceptions)
|
||||
</h3>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const copy = [...entities];
|
||||
const target = entityIds.find(
|
||||
(id) => id !== selectedEnt.id && !selectedEnt.aliases[id]
|
||||
);
|
||||
if (target) {
|
||||
copy[selectedEntIndex].aliases = {
|
||||
...selectedEnt.aliases,
|
||||
[target]: "",
|
||||
};
|
||||
setEntities(copy);
|
||||
}
|
||||
}}
|
||||
disabled={entityIds.length <= 1}
|
||||
className="h-7 text-xs flex gap-1 cursor-pointer"
|
||||
>
|
||||
<Plus className="size-3" /> Add Alias
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{Object.keys(selectedEnt.aliases || {}).length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
No descriptive aliases configured. Defaults to actual entity ID.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{Object.entries(selectedEnt.aliases).map(([targetId, aliasText]) => (
|
||||
<div
|
||||
key={targetId}
|
||||
className="flex gap-2 items-center bg-secondary/15 p-2 rounded"
|
||||
>
|
||||
<span className="text-[11px] font-mono text-muted-foreground w-1/3 truncate">
|
||||
{targetId}
|
||||
</span>
|
||||
<ChevronRight className="size-3 text-muted-foreground shrink-0" />
|
||||
<Input
|
||||
placeholder="Descriptive name (e.g. the guard)"
|
||||
value={aliasText}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].aliases = {
|
||||
...selectedEnt.aliases,
|
||||
[targetId]: e.target.value,
|
||||
};
|
||||
setEntities(copy);
|
||||
}}
|
||||
className="h-7 text-xs flex-1"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const copy = [...entities];
|
||||
const updated = { ...selectedEnt.aliases };
|
||||
delete updated[targetId];
|
||||
copy[selectedEntIndex].aliases = updated;
|
||||
setEntities(copy);
|
||||
}}
|
||||
className="text-muted-foreground hover:text-destructive cursor-pointer"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Initial Memories Section */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center border-b border-border/20 pb-2">
|
||||
<h3 className="text-body-md text-foreground font-bold">
|
||||
Initial Memories
|
||||
</h3>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const copy = [...entities];
|
||||
const newMem: MemoryData = {
|
||||
id: generateUUID(),
|
||||
timestamp: startTime,
|
||||
locationId: selectedEnt.locationId || null,
|
||||
intent: {
|
||||
type: "dialogue",
|
||||
originalText: "",
|
||||
description: "",
|
||||
actorId: selectedEnt.id,
|
||||
targetIds: [],
|
||||
},
|
||||
};
|
||||
copy[selectedEntIndex].initialMemories = [
|
||||
...selectedEnt.initialMemories,
|
||||
newMem,
|
||||
];
|
||||
setEntities(copy);
|
||||
}}
|
||||
className="h-7 text-xs flex gap-1 cursor-pointer"
|
||||
>
|
||||
<Plus className="size-3" /> Add Memory
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{!selectedEnt.initialMemories || selectedEnt.initialMemories.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
No initial memories loaded. Entities will start blank.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4 overflow-y-auto max-h-[300px] pr-1">
|
||||
{selectedEnt.initialMemories.map((mem, memIdx) => (
|
||||
<div
|
||||
key={mem.id}
|
||||
className="border border-border/20 bg-secondary/5 p-3 rounded space-y-3 relative"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].initialMemories =
|
||||
selectedEnt.initialMemories.filter((_, i) => i !== memIdx);
|
||||
setEntities(copy);
|
||||
}}
|
||||
className="absolute top-2 right-2 text-muted-foreground hover:text-destructive cursor-pointer"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground">
|
||||
Type
|
||||
</span>
|
||||
<select
|
||||
className="bg-card border border-border/30 px-2 py-0.5 text-xs outline-none w-full rounded"
|
||||
value={mem.intent.type}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].initialMemories[memIdx].intent.type =
|
||||
e.target.value as "dialogue" | "action" | "monologue";
|
||||
setEntities(copy);
|
||||
}}
|
||||
>
|
||||
<option value="dialogue">Dialogue</option>
|
||||
<option value="action">Action</option>
|
||||
<option value="monologue">Monologue</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground">
|
||||
Location
|
||||
</span>
|
||||
<select
|
||||
className="bg-card border border-border/30 px-2 py-0.5 text-xs outline-none w-full rounded font-mono"
|
||||
value={mem.locationId || ""}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].initialMemories[memIdx].locationId =
|
||||
e.target.value || null;
|
||||
setEntities(copy);
|
||||
}}
|
||||
>
|
||||
<option value="">-- Nowhere --</option>
|
||||
{locationIds.map((id) => (
|
||||
<option key={id} value={id}>
|
||||
{id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground">
|
||||
Verbatim Text (originalText)
|
||||
</span>
|
||||
<Input
|
||||
placeholder='e.g. "We should leave," Alice said.'
|
||||
value={mem.intent.originalText}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].initialMemories[
|
||||
memIdx
|
||||
].intent.originalText = e.target.value;
|
||||
setEntities(copy);
|
||||
}}
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground">
|
||||
Objective Description
|
||||
</span>
|
||||
<Input
|
||||
placeholder="e.g. Alice says she wants to leave."
|
||||
value={mem.intent.description}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
copy[selectedEntIndex].initialMemories[
|
||||
memIdx
|
||||
].intent.description = e.target.value;
|
||||
setEntities(copy);
|
||||
}}
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Targets multi-select */}
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground block">
|
||||
Involved Targets
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{entityIds
|
||||
.filter((id) => id !== selectedEnt.id)
|
||||
.map((entId) => {
|
||||
const isSelected = mem.intent.targetIds?.includes(entId);
|
||||
return (
|
||||
<button
|
||||
key={entId}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const copy = [...entities];
|
||||
const targets =
|
||||
copy[selectedEntIndex].initialMemories[memIdx]
|
||||
.intent.targetIds || [];
|
||||
if (targets.includes(entId)) {
|
||||
copy[selectedEntIndex].initialMemories[
|
||||
memIdx
|
||||
].intent.targetIds = targets.filter(
|
||||
(t) => t !== entId
|
||||
);
|
||||
} else {
|
||||
copy[selectedEntIndex].initialMemories[
|
||||
memIdx
|
||||
].intent.targetIds = [...targets, entId];
|
||||
}
|
||||
setEntities(copy);
|
||||
}}
|
||||
className={`px-1.5 py-0.5 rounded text-[9px] font-mono border transition-all cursor-pointer ${
|
||||
isSelected
|
||||
? "bg-primary/20 border-primary text-primary"
|
||||
: "bg-background border-border/30 text-muted-foreground hover:bg-secondary"
|
||||
}`}
|
||||
>
|
||||
{entId}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Validation outcome */}
|
||||
{mem.intent.type === "action" && (
|
||||
<div className="border-t border-border/20 pt-2 space-y-2">
|
||||
<Label className="text-[10px] text-muted-foreground flex items-center gap-1.5 cursor-pointer">
|
||||
<Checkbox
|
||||
checked={!!mem.outcome}
|
||||
onCheckedChange={(checked) => {
|
||||
const copy = [...entities];
|
||||
if (checked) {
|
||||
copy[selectedEntIndex].initialMemories[memIdx].outcome =
|
||||
{ isValid: true, reason: "" };
|
||||
} else {
|
||||
copy[selectedEntIndex].initialMemories[
|
||||
memIdx
|
||||
].outcome = undefined;
|
||||
}
|
||||
setEntities(copy);
|
||||
}}
|
||||
/>
|
||||
Include validation outcome
|
||||
</Label>
|
||||
{mem.outcome && (
|
||||
<div className="grid grid-cols-3 gap-2 bg-secondary/15 p-2 rounded">
|
||||
<div className="col-span-1 flex flex-col justify-center">
|
||||
<Label className="text-[9px] mb-1">isValid</Label>
|
||||
<Checkbox
|
||||
checked={mem.outcome.isValid}
|
||||
onCheckedChange={(checked) => {
|
||||
const copy = [...entities];
|
||||
if (
|
||||
copy[selectedEntIndex].initialMemories[memIdx]
|
||||
.outcome
|
||||
) {
|
||||
copy[selectedEntIndex].initialMemories[
|
||||
memIdx
|
||||
].outcome!.isValid = !!checked;
|
||||
setEntities(copy);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-[9px]">Reason</Label>
|
||||
<Input
|
||||
placeholder="Reason for valid/invalid status"
|
||||
value={mem.outcome.reason}
|
||||
onChange={(e) => {
|
||||
const copy = [...entities];
|
||||
if (
|
||||
copy[selectedEntIndex].initialMemories[memIdx]
|
||||
.outcome
|
||||
) {
|
||||
copy[selectedEntIndex].initialMemories[
|
||||
memIdx
|
||||
].outcome!.reason = e.target.value;
|
||||
setEntities(copy);
|
||||
}
|
||||
}}
|
||||
className="h-6 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="md:col-span-3 border border-border/20 bg-card p-6 shadow-[2px_2px_0_0_var(--border)] text-center text-xs text-muted-foreground">
|
||||
No entities defined.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
apps/gui/src/components/builder/JsonTab.tsx
Normal file
38
apps/gui/src/components/builder/JsonTab.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface JsonTabProps {
|
||||
compiledScenario: Record<string, unknown>;
|
||||
onCopySuccess: () => void;
|
||||
}
|
||||
|
||||
export function JsonTab({ compiledScenario, onCopySuccess }: JsonTabProps) {
|
||||
return (
|
||||
<div className="flex-1 flex flex-col border border-border/20 bg-card p-6 shadow-[2px_2px_0_0_var(--border)] min-h-[400px]">
|
||||
<div className="flex justify-between items-center border-b border-border/20 pb-3 mb-4">
|
||||
<h2 className="text-body-lg text-primary font-bold">
|
||||
Scenario JSON Code Output
|
||||
</h2>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
JSON.stringify(compiledScenario, null, 2)
|
||||
);
|
||||
onCopySuccess();
|
||||
}}
|
||||
className="h-8 text-xs cursor-pointer"
|
||||
>
|
||||
Copy to Clipboard
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<pre className="flex-1 bg-black/40 border border-border/10 p-4 rounded overflow-auto font-mono text-xs text-emerald-400 select-text leading-relaxed">
|
||||
{JSON.stringify(compiledScenario, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
370
apps/gui/src/components/builder/LocationsTab.tsx
Normal file
370
apps/gui/src/components/builder/LocationsTab.tsx
Normal file
@@ -0,0 +1,370 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { AttributeEditor } from "./AttributeEditor";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import type { LocationData, ConnectionData } from "./types";
|
||||
|
||||
interface LocationsTabProps {
|
||||
locations: LocationData[];
|
||||
setLocations: (locs: LocationData[]) => void;
|
||||
locationIds: string[];
|
||||
entityIds: string[];
|
||||
selectedLocIndex: number;
|
||||
setSelectedLocIndex: (idx: number) => void;
|
||||
generateUUID: () => string;
|
||||
}
|
||||
|
||||
export function LocationsTab({
|
||||
locations,
|
||||
setLocations,
|
||||
locationIds,
|
||||
entityIds,
|
||||
selectedLocIndex,
|
||||
setSelectedLocIndex,
|
||||
generateUUID,
|
||||
}: LocationsTabProps) {
|
||||
const addLocationConnection = (locIndex: number) => {
|
||||
const copy = [...locations];
|
||||
copy[locIndex].connections = [
|
||||
...copy[locIndex].connections,
|
||||
{
|
||||
targetId: locationIds.filter((id) => id !== locations[locIndex].id)[0] || "",
|
||||
visionProp: 10,
|
||||
soundProp: 10,
|
||||
bidirectional: true,
|
||||
},
|
||||
];
|
||||
setLocations(copy);
|
||||
};
|
||||
|
||||
const updateLocationConnection = <K extends keyof ConnectionData>(
|
||||
locIndex: number,
|
||||
connIndex: number,
|
||||
key: K,
|
||||
val: ConnectionData[K]
|
||||
) => {
|
||||
const copy = [...locations];
|
||||
copy[locIndex].connections[connIndex] = {
|
||||
...copy[locIndex].connections[connIndex],
|
||||
[key]: val,
|
||||
};
|
||||
setLocations(copy);
|
||||
};
|
||||
|
||||
const removeLocationConnection = (locIndex: number, connIndex: number) => {
|
||||
const copy = [...locations];
|
||||
copy[locIndex].connections = copy[locIndex].connections.filter(
|
||||
(_, i) => i !== connIndex
|
||||
);
|
||||
setLocations(copy);
|
||||
};
|
||||
|
||||
const selectedLoc = locations[selectedLocIndex];
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 items-start min-h-0">
|
||||
{/* Left sidebar: Locations list */}
|
||||
<div className="md:col-span-1 border border-border/20 bg-card shadow-[2px_2px_0_0_var(--border)] flex flex-col max-h-[500px]">
|
||||
<div className="p-3 border-b border-border/25 flex justify-between items-center bg-secondary/15">
|
||||
<strong className="text-xs font-mono uppercase tracking-wider text-muted-foreground">
|
||||
Locations
|
||||
</strong>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const newId = generateUUID();
|
||||
setLocations([
|
||||
...locations,
|
||||
{ id: newId, attributes: [], connections: [] },
|
||||
]);
|
||||
setSelectedLocIndex(locations.length);
|
||||
}}
|
||||
className="h-6 text-[10px] px-2 flex gap-1 cursor-pointer"
|
||||
>
|
||||
<Plus className="size-3" /> Add
|
||||
</Button>
|
||||
</div>
|
||||
<div className="overflow-y-auto divide-y divide-border/10 flex-1">
|
||||
{locations.map((loc, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
onClick={() => setSelectedLocIndex(idx)}
|
||||
className={`p-3 text-xs font-mono cursor-pointer flex justify-between items-center transition-all ${
|
||||
selectedLocIndex === idx
|
||||
? "bg-primary/10 text-primary font-bold border-l-4 border-primary"
|
||||
: "hover:bg-secondary/40 text-foreground"
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{loc.id || `(Empty ID)`}</span>
|
||||
{locations.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const newLocs = locations.filter((_, i) => i !== idx);
|
||||
setLocations(newLocs);
|
||||
setSelectedLocIndex(Math.max(0, idx - 1));
|
||||
}}
|
||||
className="text-muted-foreground hover:text-destructive transition-colors pl-2 cursor-pointer"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel: Edit selected location details */}
|
||||
{selectedLoc ? (
|
||||
<div className="md:col-span-3 border border-border/20 bg-card p-6 shadow-[2px_2px_0_0_var(--border)] grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Basic location fields */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-body-lg text-primary font-bold border-b border-border/20 pb-2">
|
||||
Location Configuration
|
||||
</h2>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Location ID</Label>
|
||||
<Input
|
||||
placeholder="e.g. tavern-cellar"
|
||||
value={selectedLoc.id}
|
||||
onChange={(e) => {
|
||||
const copy = [...locations];
|
||||
copy[selectedLocIndex].id = e.target.value
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-_]/g, "");
|
||||
setLocations(copy);
|
||||
}}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Parent Location (Optional)</Label>
|
||||
<select
|
||||
className="bg-card border border-border/30 px-3 py-1.5 text-xs outline-none w-full rounded"
|
||||
value={selectedLoc.parentId || ""}
|
||||
onChange={(e) => {
|
||||
const copy = [...locations];
|
||||
copy[selectedLocIndex].parentId = e.target.value || undefined;
|
||||
setLocations(copy);
|
||||
}}
|
||||
>
|
||||
<option value="">-- No parent --</option>
|
||||
{locationIds
|
||||
.filter((id) => id !== selectedLoc.id)
|
||||
.map((id) => (
|
||||
<option key={id} value={id}>
|
||||
{id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Attributes for Location */}
|
||||
<div className="pt-2">
|
||||
<AttributeEditor
|
||||
title="Location Attributes"
|
||||
attributes={selectedLoc.attributes || []}
|
||||
onChange={(newAttrs) => {
|
||||
const copy = [...locations];
|
||||
copy[selectedLocIndex].attributes = newAttrs;
|
||||
setLocations(copy);
|
||||
}}
|
||||
onAdd={() => {
|
||||
const copy = [...locations];
|
||||
copy[selectedLocIndex].attributes = [
|
||||
...copy[selectedLocIndex].attributes,
|
||||
{ name: "", value: "", visibility: "PUBLIC", allowedEntities: [] },
|
||||
];
|
||||
setLocations(copy);
|
||||
}}
|
||||
entityIds={entityIds}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connections (spatial paths) */}
|
||||
<div className="space-y-4 border-t lg:border-t-0 lg:border-l border-border/20 lg:pl-6 pt-4 lg:pt-0">
|
||||
<div className="flex justify-between items-center border-b border-border/20 pb-2">
|
||||
<h3 className="text-body-md text-foreground font-bold">
|
||||
Connections / Portals
|
||||
</h3>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => addLocationConnection(selectedLocIndex)}
|
||||
className="h-7 text-xs flex gap-1 cursor-pointer"
|
||||
>
|
||||
<Plus className="size-3" /> Add Connection
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{!selectedLoc.connections || selectedLoc.connections.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
No connections leading from this location.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-4 overflow-y-auto max-h-[400px] pr-1">
|
||||
{selectedLoc.connections.map((conn, connIdx) => (
|
||||
<div
|
||||
key={connIdx}
|
||||
className="border border-border/20 bg-secondary/10 p-3 rounded space-y-3 relative group"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeLocationConnection(selectedLocIndex, connIdx)}
|
||||
className="absolute top-2 right-2 text-muted-foreground hover:text-destructive cursor-pointer"
|
||||
title="Delete connection"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 pr-6">
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground">
|
||||
Target Location
|
||||
</span>
|
||||
<select
|
||||
className="bg-card border border-border/30 px-2 py-1 text-xs outline-none w-full rounded"
|
||||
value={conn.targetId}
|
||||
onChange={(e) =>
|
||||
updateLocationConnection(
|
||||
selectedLocIndex,
|
||||
connIdx,
|
||||
"targetId",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="">-- Choose target --</option>
|
||||
{locationIds
|
||||
.filter((id) => id !== selectedLoc.id)
|
||||
.map((id) => (
|
||||
<option key={id} value={id}>
|
||||
{id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground">
|
||||
Portal Name
|
||||
</span>
|
||||
<Input
|
||||
placeholder="e.g. wooden door"
|
||||
value={conn.portalName || ""}
|
||||
onChange={(e) =>
|
||||
updateLocationConnection(
|
||||
selectedLocIndex,
|
||||
connIdx,
|
||||
"portalName",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground">
|
||||
Portal State
|
||||
</span>
|
||||
<Input
|
||||
placeholder="e.g. locked, closed, heavy iron gate"
|
||||
value={conn.portalStateDescriptor || ""}
|
||||
onChange={(e) =>
|
||||
updateLocationConnection(
|
||||
selectedLocIndex,
|
||||
connIdx,
|
||||
"portalStateDescriptor",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 text-xs">
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground block">
|
||||
Vision Propagation ({conn.visionProp})
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="10"
|
||||
value={conn.visionProp}
|
||||
onChange={(e) =>
|
||||
updateLocationConnection(
|
||||
selectedLocIndex,
|
||||
connIdx,
|
||||
"visionProp",
|
||||
Number(e.target.value)
|
||||
)
|
||||
}
|
||||
className="w-full h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<span className="text-[10px] font-semibold text-muted-foreground block">
|
||||
Sound Propagation ({conn.soundProp})
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="10"
|
||||
value={conn.soundProp}
|
||||
onChange={(e) =>
|
||||
updateLocationConnection(
|
||||
selectedLocIndex,
|
||||
connIdx,
|
||||
"soundProp",
|
||||
Number(e.target.value)
|
||||
)
|
||||
}
|
||||
className="w-full h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-[11px] text-muted-foreground flex items-center gap-1.5 cursor-pointer">
|
||||
<Checkbox
|
||||
checked={conn.bidirectional}
|
||||
onCheckedChange={(checked) =>
|
||||
updateLocationConnection(
|
||||
selectedLocIndex,
|
||||
connIdx,
|
||||
"bidirectional",
|
||||
!!checked
|
||||
)
|
||||
}
|
||||
/>
|
||||
Bidirectional Connection (creates reverse path automatically)
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="md:col-span-3 border border-border/20 bg-card p-6 shadow-[2px_2px_0_0_var(--border)] text-center text-xs text-muted-foreground">
|
||||
No locations defined.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
120
apps/gui/src/components/builder/MetadataTab.tsx
Normal file
120
apps/gui/src/components/builder/MetadataTab.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
"use client";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { AttributeEditor } from "./AttributeEditor";
|
||||
import type { AttributeData } from "./types";
|
||||
|
||||
interface MetadataTabProps {
|
||||
scenarioId: string;
|
||||
setScenarioId: (val: string) => void;
|
||||
name: string;
|
||||
setName: (val: string) => void;
|
||||
description: string;
|
||||
setDescription: (val: string) => void;
|
||||
startTime: string;
|
||||
setStartTime: (val: string) => void;
|
||||
worldAttributes: AttributeData[];
|
||||
setWorldAttributes: (attrs: AttributeData[]) => void;
|
||||
entityIds: string[];
|
||||
}
|
||||
|
||||
export function MetadataTab({
|
||||
scenarioId,
|
||||
setScenarioId,
|
||||
name,
|
||||
setName,
|
||||
description,
|
||||
setDescription,
|
||||
startTime,
|
||||
setStartTime,
|
||||
worldAttributes,
|
||||
setWorldAttributes,
|
||||
entityIds,
|
||||
}: MetadataTabProps) {
|
||||
const addWorldAttribute = () => {
|
||||
setWorldAttributes([
|
||||
...worldAttributes,
|
||||
{ name: "", value: "", visibility: "PUBLIC", allowedEntities: [] },
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Basic Fields */}
|
||||
<div className="lg:col-span-2 space-y-5 border border-border/20 bg-card p-6 shadow-[2px_2px_0_0_var(--border)]">
|
||||
<h2 className="text-body-lg text-primary font-bold border-b border-border/20 pb-2">
|
||||
Scenario Metadata
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="sc-id">Scenario Template ID</Label>
|
||||
<Input
|
||||
id="sc-id"
|
||||
placeholder="e.g. my-custom-scenario"
|
||||
value={scenarioId}
|
||||
onChange={(e) =>
|
||||
setScenarioId(
|
||||
e.target.value.toLowerCase().replace(/[^a-z0-9-_]/g, "")
|
||||
)
|
||||
}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
Unique filename ID. Alphanumeric, hyphens and underscores only.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="sc-start">Start Time (ISO Date)</Label>
|
||||
<Input
|
||||
id="sc-start"
|
||||
placeholder="e.g. 2026-07-06T12:00:00.000Z"
|
||||
value={startTime}
|
||||
onChange={(e) => setStartTime(e.target.value)}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
Global clock starting timestamp.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="sc-name">Scenario Name</Label>
|
||||
<Input
|
||||
id="sc-name"
|
||||
placeholder="e.g. The Quiet Tavern"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="sc-desc">Description</Label>
|
||||
<Textarea
|
||||
id="sc-desc"
|
||||
placeholder="Describe the starting setup..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="text-xs h-24"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* World level Attributes */}
|
||||
<div className="border border-border/20 bg-card p-6 shadow-[2px_2px_0_0_var(--border)]">
|
||||
<AttributeEditor
|
||||
title="World Attributes"
|
||||
attributes={worldAttributes}
|
||||
onChange={setWorldAttributes}
|
||||
onAdd={addWorldAttribute}
|
||||
entityIds={entityIds}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
apps/gui/src/components/builder/types.ts
Normal file
49
apps/gui/src/components/builder/types.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
export interface AttributeData {
|
||||
name: string;
|
||||
value: string;
|
||||
visibility: "PUBLIC" | "PRIVATE";
|
||||
allowedEntities: string[];
|
||||
}
|
||||
|
||||
export interface ConnectionData {
|
||||
targetId: string;
|
||||
portalName?: string;
|
||||
portalStateDescriptor?: string;
|
||||
visionProp: number;
|
||||
soundProp: number;
|
||||
bidirectional: boolean;
|
||||
}
|
||||
|
||||
export interface LocationData {
|
||||
id: string;
|
||||
parentId?: string;
|
||||
attributes: AttributeData[];
|
||||
connections: ConnectionData[];
|
||||
}
|
||||
|
||||
export interface MemoryData {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
locationId: string | null;
|
||||
intent: {
|
||||
type: "dialogue" | "action" | "monologue";
|
||||
originalText: string;
|
||||
description: string;
|
||||
selfDescription?: string;
|
||||
actorId: string;
|
||||
targetIds: string[];
|
||||
modifiers?: string[];
|
||||
};
|
||||
outcome?: {
|
||||
isValid: boolean;
|
||||
reason: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface EntityData {
|
||||
id: string;
|
||||
locationId?: string;
|
||||
attributes: AttributeData[];
|
||||
aliases: Record<string, string>;
|
||||
initialMemories: MemoryData[];
|
||||
}
|
||||
Reference in New Issue
Block a user