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)]);

30

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

31

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

32

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

33

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

34

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

35

}

36

37

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

38

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

39

const handle = params.handle.toLowerCase();

40

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

41

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

42

if (intent === "remember") {

43

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

44

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

45

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

46

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

47

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

48

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

49

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

50

}

51

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

52

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

53

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

54

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

}

/**

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

59

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

60

* fact carries where it came from.

61

*/

62

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

63

const agent = useOutletContext<WorkspaceAgent>();

64

const { memories, channels, isOwner } = loaderData;

65

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

66

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

71

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>{" "}

72

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

73

</p>

74

75

{groups.length === 0 ? (

76

77

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.

78

</Quiet>

79

) : (

80

groups.map((group) => (

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

85

</h2>

86

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

87

</div>

88

89

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

))}

</ul>

</section>

))

)}

</div>

);

}

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

101

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

102

const form = useRef<HTMLFormElement>(null);

103

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

104

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

105

useEffect(() => {

106

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

107

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

108

const options = [

109

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

110

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

111

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

112

];

113

return (

114

<fetcher.Form ref={form} method="post" className="rounded-xl border border-line bg-surface p-4">

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" />

131

</div>

132

{scope === "channel" && (

133

134

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

135

</div>

136

)}

137

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

138

139

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

</button>

</div>

</fetcher.Form>

);

}

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

147

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

148

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

149

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

150

useEffect(() => {

151

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

152

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

153

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

154

const by =

155

memory.created_by_kind === "agent" ? (

156

157

158

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>

175

<button type="button" className={`${BUTTONS.QUIET} h-8 py-0`} 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>

192

193

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

194

{by}

195

{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)} className="flex size-7 items-center justify-center rounded-md text-faint max-sm:size-10 hover:bg-raised hover:text-fg">

</button>

</Hint>

<Confirm

title="Forget this fact?"

218

confirm="Forget"

219