apps/web/app/routes/workspace/agents/memory.tsx · flagon-io/g1t

const [memories, sidebar] = await Promise.all([readOrNull(workspaceAgents.memories(slug, params.handle.toLowerCase(), viewer)), sidebarOrNull(slug, viewer)]);

32

const channels = (sidebar?.entries ?? [])

33

.filter((entry) => entry.channel.kind === "channel" && entry.channel.name)

34

.map((entry) => ({ id: entry.channel.id, name: entry.channel.name! }))

35

.sort((a, b) => a.name.localeCompare(b.name));

36

return { memories, channels, isOwner: role === "owner", me: viewer.username };

37

}

38

39

export async function action({ params, context, request }: Route.ActionArgs): Promise<ActionResult> {

40

const { viewer, slug, form } = await agentsAction(request, context, params.owner);

41

const handle = params.handle.toLowerCase();

42

const intent = String(form.get("intent") ?? "");

43

const id = String(form.get("id") ?? "");

44

if (intent === "remember") {

45

const body = String(form.get("body") ?? "").trim();

46

if (!body) return { ok: false, intent, error: "Write what it should remember." };

47

const asked = String(form.get("scope") ?? "person");

48

const scope: AgentMemoryScope = asked === "workspace" || asked === "channel" ? asked : "person";

49

const channel = String(form.get("channel") ?? "");

50

if (scope === "channel" && !channel) return { ok: false, intent, error: "Choose the channel it's for." };

51

return answer(intent, workspaceAgents.remember(slug, handle, viewer, { body, scope, scope_ref: scope === "channel" ? channel : null }));

52

}

53

if (intent === "edit") return answer(intent, workspaceAgents.updateMemory(slug, handle, viewer, id, { body: String(form.get("body") ?? "") }));

54

if (intent === "pin") return answer(intent, workspaceAgents.updateMemory(slug, handle, viewer, id, { pinned: form.get("pinned") === "true" }));

55

if (intent === "forget") return answer(intent, workspaceAgents.forget(slug, handle, viewer, id));

56

return { ok: false, intent, error: "Unknown request." };

}

/**

* What the agent remembers, by where it may be recalled: the whole

61

* workspace, one conversation, or only the viewer's own DMs with it. Each

62

* fact carries where it came from.

63

*/

64

export default function MemoryTab({ loaderData }: Route.ComponentProps) {

65

const agent = useOutletContext<WorkspaceAgent>();

66

const { memories, channels, isOwner } = loaderData;

67

if (!memories) return <Quiet title="Memory can't be shown right now">The agents service didn't answer. Reload in a moment.</Quiet>;

68

const groups = memoryGroups(memories);

return (

{agent.display_name} has no hidden memory: only these facts, each recalled only where it belongs. <strong className="font-medium text-fg-soft">Workspace</strong> facts

73

are recalled anywhere; a <strong className="font-medium text-fg-soft">conversation</strong>'s only there; <strong className="font-medium text-fg-soft">just you</strong>{" "}

74

only in your direct messages with it. You see the facts from conversations you're in.

75

</p>

76

77

{groups.length === 0 ? (

78

79

When a session learns something worth keeping, or someone tells {agent.display_name} to remember it, the fact shows here with where it came from.

80

</Quiet>

81

) : (

82

groups.map((group) => (

{group.title} <span className="text-faint">{group.memories.length}</span>

87

</h2>

88

<p className="text-xs text-faint">{group.about}</p>

</div>

<ul>

{group.memories.map((memory) => (

))}

</ul>

</Card>

</section>

))

)}

</div>

);

}

function AddFact({ agent, channels, isOwner }: { agent: WorkspaceAgent; channels: { id: string; name: string }[]; isOwner: boolean }) {

105

const fetcher = useFetcher<ActionResult>({ key: "remember" });

106

const form = useRef<HTMLFormElement>(null);

107

const [scope, setScope] = useState<AgentMemoryScope>("person");

108

const busy = fetcher.state !== "idle";

109

useEffect(() => {

110

if (fetcher.state === "idle" && fetcher.data?.ok) form.current?.reset();

111

}, [fetcher.state, fetcher.data]);

112

const options = [

113

{ value: "person", label: "Just me", description: "Recalled only in your direct messages with it." },

114

...(isOwner ? [{ value: "workspace", label: "This workspace", description: "Recalled anywhere, for anyone. Owners only." }] : []),

115

...(channels.length > 0 ? [{ value: "channel", label: "A channel", description: "Recalled only in that channel and its threads." }] : []),

];

return (

<fetcher.Form ref={form} method="post">

Add a fact

</label>

<Textarea

id="fact"

name="body"

rows={2}

maxLength={MAX_FACT}

required

placeholder={`Something ${agent.display_name} should know, such as: Releases go out on Thursdays.`}

className="mt-2"

/>

<SelectField name="scope" value={scope} onValueChange={(v) => setScope(v as AgentMemoryScope)} options={options} size="sm" aria-label="Who it's recalled for" />

136

</div>

137

{scope === "channel" && (

138

139

<SelectField name="channel" options={channels.map((c) => ({ value: c.id, label: `#${c.name}` }))} placeholder="Choose a channel" size="sm" aria-label="Channel" required />

140

</div>

141

)}

142

<span className="grow text-xs text-danger">{fetcher.data && !fetcher.data.ok && fetcher.data.intent === "remember" ? fetcher.data.error : ""}</span>

143

144

{busy ? "Saving…" : "Remember"}

</Button>

</div>

</fetcher.Form>

</Card>

);

}

function Fact({ memory, agent, canChange }: { memory: AgentMemory; agent: WorkspaceAgent; canChange: boolean }) {

153

const [editing, setEditing] = useState(false);

154

const edit = useFetcher<ActionResult>({ key: `edit-${memory.id}` });

155

const pin = useFetcher<ActionResult>({ key: `pin-${memory.id}` });

156

useEffect(() => {

157

if (edit.state === "idle" && edit.data?.ok) setEditing(false);

158

}, [edit.state, edit.data]);

159

const pinned = pin.formData ? pin.formData.get("pinned") === "true" : memory.pinned;

160

const by =

161

memory.created_by_kind === "agent" ? (

162

163

164

Kept by {memory.created_by === agent.handle ? agent.display_name : `@${memory.created_by}`}

</span>

) : (

Told by @{memory.created_by}

</span>

);

return (

{editing ? (

<edit.Form method="post" className="space-y-2">

<span className="grow text-xs text-danger">{edit.data && !edit.data.ok ? edit.data.error : ""}</span>

181

<Button type="button" variant="outline" size="sm" onClick={() => setEditing(false)}>

Cancel

</Button>

{edit.state !== "idle" ? "Saving…" : "Save"}

</Button>

</div>

</edit.Form>

) : (

{pinned && (

</Hint>

)}

<p className="text-sm text-fg">{memory.body}</p>

198

199

{memory.scope === "channel" && memory.scope_label && <span className="text-muted">#{memory.scope_label}</span>}

200

{by}

201

{memory.source_label && <span>from {memory.source_label}</span>}

</p>

</div>

{canChange && (

<pin.Form method="post">

{pinned ? <PinOff size={14} /> : <Pin size={14} />}

</Button>

</Hint>

</pin.Form>

<Button type="button" aria-label="Edit" onClick={() => setEditing(true)} variant="ghost" size="icon-xs" className="text-faint max-sm:size-10">

</Button>

</Hint>

<Confirm

title="Forget this fact?"

224

confirm="Forget"

225

fields={{ intent: "forget", id: memory.id }}

226

fetcherKey={`forget-${memory.id}`}

trigger={

</Button>

}

>

{agent.display_name} won't recall “{memory.body}” again, anywhere. It can learn it again if it comes up.

</Confirm>

</div>

)}

</div>

)}

</li>

);

}