Skip to content

Commit c557e4a

Browse files
jamiepinejamiepine
committed
ui
1 parent 4a1b2bf commit c557e4a

5 files changed

Lines changed: 210 additions & 21 deletions

File tree

‎packages/ai/package.json‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,33 @@
2222
"typecheck": "tsc --noEmit"
2323
},
2424
"dependencies": {
25-
"@spacedrive/primitives": "^0.2.0",
2625
"@phosphor-icons/react": "^2.1.0",
26+
"@spacedrive/primitives": "^0.2.0",
27+
"clsx": "^2.1.0",
28+
"framer-motion": "^11.0.0",
29+
"react-loader-spinner": "^8.0.2",
2730
"react-markdown": "^9.0.0",
28-
"remark-gfm": "^4.0.0",
2931
"rehype-raw": "^7.0.0",
30-
"clsx": "^2.1.0",
31-
"framer-motion": "^11.0.0"
32+
"remark-gfm": "^4.0.0"
3233
},
3334
"devDependencies": {
34-
"tsup": "^8.0.0",
35-
"typescript": "^5.4.0",
3635
"@types/react": "^19.0.0",
37-
"@types/react-dom": "^19.0.0"
36+
"@types/react-dom": "^19.0.0",
37+
"tsup": "^8.0.0",
38+
"typescript": "^5.4.0"
3839
},
3940
"peerDependencies": {
40-
"react": "^18.0.0 || ^19.0.0",
41-
"react-dom": "^18.0.0 || ^19.0.0",
4241
"@tanstack/react-query": "^5.0.0",
43-
"@tanstack/react-virtual": "^3.0.0"
42+
"@tanstack/react-virtual": "^3.0.0",
43+
"react": "^18.0.0 || ^19.0.0",
44+
"react-dom": "^18.0.0 || ^19.0.0"
4445
},
4546
"optionalDependencies": {
46-
"@react-sigma/core": "^4.0.0",
47-
"sigma": "^3.0.0",
48-
"graphology": "^0.25.0",
4947
"@dnd-kit/core": "^6.0.0",
5048
"@dnd-kit/sortable": "^8.0.0",
51-
"@dnd-kit/utilities": "^3.0.0"
49+
"@dnd-kit/utilities": "^3.0.0",
50+
"@react-sigma/core": "^4.0.0",
51+
"graphology": "^0.25.0",
52+
"sigma": "^3.0.0"
5253
}
5354
}

‎packages/ai/pnpm-lock.yaml‎

Lines changed: 113 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ai/src/InlineBranchCard.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import {useState} from 'react';
2+
import {clsx} from 'clsx';
3+
import {CaretDown, GitBranch} from '@phosphor-icons/react';
4+
import {Grid} from 'react-loader-spinner';
5+
import {Markdown} from './Markdown';
6+
7+
interface InlineBranchCardProps {
8+
description: string;
9+
completedAt: string | null;
10+
conclusion?: string | null;
11+
className?: string;
12+
}
13+
14+
function InlineBranchCard({
15+
description,
16+
completedAt,
17+
conclusion,
18+
className,
19+
}: InlineBranchCardProps) {
20+
const [expanded, setExpanded] = useState(false);
21+
const isRunning = !completedAt;
22+
23+
return (
24+
<div className={clsx('group flex min-w-0 flex-col items-start', className)}>
25+
<div className="min-w-0 max-w-full overflow-hidden rounded-2xl border border-app-line/50 bg-app-box/30 backdrop-blur-sm">
26+
<button
27+
type="button"
28+
onClick={() => setExpanded((v) => !v)}
29+
className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-app-box/30"
30+
>
31+
<div className="mt-0.5 shrink-0">
32+
{isRunning ? (
33+
<Grid height={16} width={16} color="currentColor" ariaLabel="loading" wrapperClass="text-accent" />
34+
) : (
35+
<div className="flex size-7 items-center justify-center rounded-full bg-accent/15 text-accent">
36+
<GitBranch className="size-4" weight="bold" />
37+
</div>
38+
)}
39+
</div>
40+
<div className="min-w-0 flex-1">
41+
<div className="flex items-center gap-2">
42+
<div className="line-clamp-2 min-w-0 flex-1 text-sm font-medium leading-5 text-ink">
43+
{description}
44+
</div>
45+
<span
46+
className={clsx(
47+
'rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.12em]',
48+
isRunning
49+
? 'bg-accent/12 text-accent'
50+
: 'bg-emerald-500/12 text-emerald-400',
51+
)}
52+
>
53+
{isRunning ? 'thinking' : 'done'}
54+
</span>
55+
</div>
56+
</div>
57+
{conclusion && (
58+
<CaretDown
59+
className={clsx(
60+
'mt-1 size-4 shrink-0 text-ink-faint transition-transform',
61+
expanded ? 'rotate-180' : '',
62+
)}
63+
weight="bold"
64+
/>
65+
)}
66+
</button>
67+
{expanded && conclusion && (
68+
<div className="border-t border-app-line/30 px-4 py-3">
69+
<Markdown content={conclusion} className="text-xs text-ink-dull" />
70+
</div>
71+
)}
72+
</div>
73+
</div>
74+
);
75+
}
76+
77+
export {InlineBranchCard};
78+
export type {InlineBranchCardProps};

‎packages/ai/src/InlineWorkerCard.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { clsx } from 'clsx';
33
import {
44
CaretDown,
55
CheckCircle,
6-
ClockCounterClockwise,
76
Copy,
87
Stop,
98
Wrench
109
} from '@phosphor-icons/react';
10+
import {Grid} from 'react-loader-spinner';
1111
import { AnimatePresence, motion } from 'framer-motion';
1212
import { ToolCall } from './ToolCall';
1313
import { Markdown } from './Markdown';
@@ -58,12 +58,7 @@ function InlineWorkerCard({
5858
>
5959
<div className="mt-0.5 shrink-0">
6060
{isRunning ? (
61-
<div className="flex size-7 items-center justify-center rounded-full bg-accent/15 text-accent">
62-
<ClockCounterClockwise
63-
className="size-4 animate-spin"
64-
weight="bold"
65-
/>
66-
</div>
61+
<Grid height={16} width={16} color="currentColor" ariaLabel="loading" wrapperClass="text-accent" />
6762
) : isDone ? (
6863
<div className="flex size-7 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-400">
6964
<CheckCircle className="size-4" weight="fill" />

‎packages/ai/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ export {MessageBubble} from "./MessageBubble";
3434
export type {MessageBubbleProps} from "./MessageBubble";
3535
export {InlineWorkerCard} from "./InlineWorkerCard";
3636
export type {InlineWorkerCardProps} from "./InlineWorkerCard";
37+
export {InlineBranchCard} from "./InlineBranchCard";
38+
export type {InlineBranchCardProps} from "./InlineBranchCard";
3739
export {ModelSelector} from "./ModelSelector";
3840
export type {ModelSelectorProps} from "./ModelSelector";
3941
export {ChatComposer} from "./ChatComposer";

0 commit comments

Comments
 (0)