Skip to content

Commit fa2f563

Browse files
arnaudpfuarnaudpfu
committed
feat: Introduce new ai-react and ai-react-native packages, refactor ai-chat primitives, and update project configurations.
1 parent 8503628 commit fa2f563

File tree

141 files changed

+1543
-786
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

141 files changed

+1543
-786
lines changed

‎apps/nextjs-example/@types/components.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { webComponents } from '../src/web-components';
2+
3+
export type RuntimeComponents = typeof webComponents;

‎apps/nextjs-example/app/test2/attachment.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ import {
1616
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
1717
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
1818
import { cn } from "@/lib/utils";
19-
import * as AttachmentPrimitive from '@creatorem/ai-chat/primitives/attachment/index'
20-
import { useAttachment } from '@creatorem/ai-chat/primitives/attachment/index'
21-
import * as ComposerPrimitive from '@creatorem/ai-chat/primitives/composer/index'
22-
import * as MessagePrimitive from '@creatorem/ai-chat/primitives/message/index'
19+
import * as AttachmentPrimitive from '@creatorem/ai-react/primitives/attachment'
20+
import { useAttachment } from '@creatorem/ai-react/primitives/attachment'
21+
import * as ComposerPrimitive from '@creatorem/ai-react/primitives/composer'
22+
import * as MessagePrimitive from '@creatorem/ai-react/primitives/message'
2323

2424
const useFileSrc = (file: File | undefined) => {
2525
const [src, setSrc] = useState<string | undefined>(undefined);

‎apps/nextjs-example/app/test2/markdown-text.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
MarkdownTextPrimitive,
1414
unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
1515
useIsMarkdownCodeBlock,
16-
} from '../../../../packages-test-3/ai-chat/src/markdown/index';
16+
} from '@creatorem/ai-react/markdown/index';
1717

1818
const MarkdownTextImpl = () => {
1919
return (

‎apps/nextjs-example/app/test2/page.tsx‎

Lines changed: 67 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,28 @@
11
'use client';
22

3-
import { useChat } from '@ai-sdk/react';
43
import { FC, useState } from 'react';
5-
import { AiProvider as AuiProvider } from '@creatorem/ai-chat/primitives/ai-provider'
6-
import {
7-
ThreadPrimitiveRoot,
8-
ThreadPrimitiveViewport,
9-
ThreadPrimitiveViewportFooter,
10-
ThreadPrimitiveMessages,
11-
ThreadPrimitiveSuggestion,
12-
ThreadPrimitiveScrollToBottom,
13-
ThreadPrimitiveIf
14-
} from '@creatorem/ai-chat/primitives/thread/index'
15-
16-
import * as ComposerPrimitive from '@creatorem/ai-chat/primitives/composer/index'
17-
// import { ThreadPrimitiveIf } from '@creatorem/ai-chat/primitives/thread/thread-if'
4+
import { AiProvider } from '@creatorem/ai-react/ai-provider'
5+
import * as ComposerPrimitive from '@creatorem/ai-react/primitives/composer'
186
import {
197
Root as MessagePrimitiveRoot,
20-
Parts as MessagePrimitiveParts,
218
If as MessagePrimitiveIf,
229
Error as MessagePrimitiveError,
23-
} from '@creatorem/ai-chat/primitives/message/index'
24-
import {
25-
Root as ErrorPrimitiveRoot,
26-
Message as ErrorPrimitiveMessage
27-
} from '@creatorem/ai-chat/primitives/error/index'
10+
} from '@creatorem/ai-react/primitives/message'
11+
import * as ErrorPrimitive from '@creatorem/ai-react/primitives/error'
2812

29-
import * as ActionBarPrimitive from '@creatorem/ai-chat/primitives/action-bar/index'
30-
import * as BranchPickerPrimitive from '@creatorem/ai-chat/primitives/branch-picker/index'
31-
import * as ActionBarMorePrimitive from '@creatorem/ai-chat/primitives/action-bar-more/index'
13+
import * as ActionBarPrimitive from "@creatorem/ai-react/primitives/action-bar";
14+
import * as ActionBarMorePrimitive from "@creatorem/ai-react/primitives/action-bar-more";
15+
import * as BranchPickerPrimitive from "@creatorem/ai-react/primitives/branch-picker";
16+
import * as ThreadPrimitive from "@creatorem/ai-react/primitives/thread";
17+
import * as MessagePrimitive from "@creatorem/ai-react/primitives/message";
18+
// import { MessagePrimitiveParts } from "@creatorem/ai-react/primitives/message";
3219
import { Button } from '@/components/ui/button';
3320
import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DownloadIcon, MoreHorizontalIcon, PencilIcon, RefreshCwIcon, SquareIcon } from 'lucide-react';
3421
import { TooltipIconButton } from '@/components/ai-chat/tooltip-icon-button';
3522
import { cn } from '@/lib/utils';
3623
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
3724
import { Separator } from '@/components/ui/separator';
3825
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
39-
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
4026
import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } from './attachment';
4127
import { Reasoning, ReasoningGroup } from './reasoning';
4228
import { ToolFallback } from './tool-fallback';
@@ -46,90 +32,90 @@ import { WeatherToolRegistration } from './weather-tool-ui';
4632

4733
export default function Chat() {
4834
return (
49-
<AuiProvider>
50-
<SidebarProvider>
51-
<div className="flex h-dvh w-full pr-0.5">
52-
<ThreadListSidebar />
53-
<SidebarInset>
54-
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
55-
<SidebarTrigger />
56-
<Separator orientation="vertical" className="mr-2 h-4" />
57-
<Breadcrumb>
58-
<BreadcrumbList>
59-
<BreadcrumbItem className="hidden md:block">
60-
<BreadcrumbLink
61-
href="https://www.assistant-ui.com/docs/getting-started"
62-
target="_blank"
63-
rel="noopener noreferrer"
64-
>
65-
Build Your Own ChatGPT UX
66-
</BreadcrumbLink>
67-
</BreadcrumbItem>
68-
<BreadcrumbSeparator className="hidden md:block" />
69-
<BreadcrumbItem>
70-
<BreadcrumbPage>Starter Template</BreadcrumbPage>
71-
</BreadcrumbItem>
72-
</BreadcrumbList>
73-
</Breadcrumb>
74-
</header>
75-
<div className="flex-1 overflow-hidden">
76-
<Thread />
77-
</div>
78-
</SidebarInset>
79-
</div>
80-
</SidebarProvider>
81-
</AuiProvider>
35+
<AiProvider>
36+
<SidebarProvider>
37+
<div className="flex h-dvh w-full pr-0.5">
38+
<ThreadListSidebar />
39+
<SidebarInset>
40+
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
41+
<SidebarTrigger />
42+
<Separator orientation="vertical" className="mr-2 h-4" />
43+
<Breadcrumb>
44+
<BreadcrumbList>
45+
<BreadcrumbItem className="hidden md:block">
46+
<BreadcrumbLink
47+
href="https://www.assistant-ui.com/docs/getting-started"
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
>
51+
Build Your Own ChatGPT UX
52+
</BreadcrumbLink>
53+
</BreadcrumbItem>
54+
<BreadcrumbSeparator className="hidden md:block" />
55+
<BreadcrumbItem>
56+
<BreadcrumbPage>Starter Template</BreadcrumbPage>
57+
</BreadcrumbItem>
58+
</BreadcrumbList>
59+
</Breadcrumb>
60+
</header>
61+
<div className="flex-1 overflow-hidden">
62+
<Thread />
63+
</div>
64+
</SidebarInset>
65+
</div>
66+
</SidebarProvider>
67+
</AiProvider>
8268
);
8369
}
8470

8571
const Thread: React.FC = () => {
8672
return (
87-
<ThreadPrimitiveRoot>
73+
<ThreadPrimitive.Root>
8874
<WeatherToolRegistration />
8975
<div
9076
className="aui-root aui-thread-root @container flex h-full flex-col"
9177
style={{
9278
["--thread-max-width" as string]: "44rem",
9379
}}
9480
>
95-
<ThreadPrimitiveViewport
81+
<ThreadPrimitive.Viewport
9682
turnAnchor="top"
9783
className='aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4'
9884
>
9985

100-
<ThreadPrimitiveIf empty={true}>
86+
<ThreadPrimitive.If empty={true}>
10187
<ThreadWelcome />
102-
</ThreadPrimitiveIf>
88+
</ThreadPrimitive.If>
10389

104-
<ThreadPrimitiveMessages
90+
<ThreadPrimitive.Messages
10591
components={{
10692
UserMessage,
10793
EditComposer,
10894
AssistantMessage,
10995
}}
11096
/>
11197

112-
<ThreadPrimitiveViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
98+
<ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
11399
<ThreadScrollToBottom />
114100
<Composer />
115-
</ThreadPrimitiveViewportFooter>
116-
</ThreadPrimitiveViewport>
101+
</ThreadPrimitive.ViewportFooter>
102+
</ThreadPrimitive.Viewport>
117103
</div>
118-
</ThreadPrimitiveRoot>
104+
</ThreadPrimitive.Root>
119105
);
120106
};
121107

122108
const ThreadScrollToBottom: FC = () => {
123109
return (
124-
<ThreadPrimitiveScrollToBottom asChild>
110+
<ThreadPrimitive.ScrollToBottom asChild>
125111
<TooltipIconButton
126112
tooltip="Scroll to bottom"
127113
variant="outline"
128114
className="aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
129115
>
130116
<ArrowDownIcon />
131117
</TooltipIconButton>
132-
</ThreadPrimitiveScrollToBottom>
118+
</ThreadPrimitive.ScrollToBottom>
133119
);
134120
};
135121

@@ -173,7 +159,7 @@ const ThreadSuggestions: FC = () => {
173159
className="aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200"
174160
style={{ animationDelay: `${100 + index * 50}ms` }}
175161
>
176-
<ThreadPrimitiveSuggestion prompt={suggestion.prompt} send asChild>
162+
<ThreadPrimitive.Suggestion prompt={suggestion.prompt} send asChild>
177163
<Button
178164
variant="ghost"
179165
className="aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-left text-sm transition-colors hover:bg-muted"
@@ -186,7 +172,7 @@ const ThreadSuggestions: FC = () => {
186172
{suggestion.label}
187173
</span>
188174
</Button>
189-
</ThreadPrimitiveSuggestion>
175+
</ThreadPrimitive.Suggestion>
190176
</div>
191177
))}
192178
</div>
@@ -218,7 +204,7 @@ const ComposerAction: FC = () => {
218204
<div className="aui-composer-action-wrapper relative mx-2 mb-2 flex items-center justify-between">
219205
<ComposerAddAttachment />
220206

221-
<ThreadPrimitiveIf running={false}>
207+
<ThreadPrimitive.If running={false}>
222208
<ComposerPrimitive.Send asChild>
223209
<TooltipIconButton
224210
tooltip="Send message"
@@ -232,9 +218,9 @@ const ComposerAction: FC = () => {
232218
<ArrowUpIcon className="aui-composer-send-icon size-4" />
233219
</TooltipIconButton>
234220
</ComposerPrimitive.Send>
235-
</ThreadPrimitiveIf>
221+
</ThreadPrimitive.If>
236222

237-
<ThreadPrimitiveIf running={true}>
223+
<ThreadPrimitive.If running={true}>
238224
<ComposerPrimitive.Cancel asChild>
239225
<Button
240226
type="button"
@@ -246,7 +232,7 @@ const ComposerAction: FC = () => {
246232
<SquareIcon className="aui-composer-cancel-icon size-3 fill-current" />
247233
</Button>
248234
</ComposerPrimitive.Cancel>
249-
</ThreadPrimitiveIf>
235+
</ThreadPrimitive.If>
250236
</div>
251237
);
252238
};
@@ -255,9 +241,9 @@ const ComposerAction: FC = () => {
255241
const MessageError: FC = () => {
256242
return (
257243
<MessagePrimitiveError>
258-
<ErrorPrimitiveRoot className="aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200">
259-
<ErrorPrimitiveMessage className="aui-message-error-message line-clamp-2" />
260-
</ErrorPrimitiveRoot>
244+
<ErrorPrimitive.Root className="aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200">
245+
<ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
246+
</ErrorPrimitive.Root>
261247
</MessagePrimitiveError>
262248
);
263249
};
@@ -270,7 +256,7 @@ const AssistantMessage: FC = () => {
270256
data-role="assistant"
271257
>
272258
<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
273-
<MessagePrimitiveParts
259+
<MessagePrimitive.Parts
274260
components={{
275261
Text: MarkdownText,
276262
Reasoning,
@@ -348,7 +334,7 @@ const UserMessage: FC = () => {
348334

349335
<div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
350336
<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
351-
<MessagePrimitiveParts />
337+
<MessagePrimitive.Parts />
352338
</div>
353339
<div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
354340
<UserActionBar />
@@ -417,8 +403,8 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
417403
<ChevronLeftIcon />
418404
</TooltipIconButton>
419405
</BranchPickerPrimitive.Previous>
420-
<span className="aui-branch-picker-state font-medium">
421-
<BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
406+
<span className="aui-branch-picker-state flex items-center gap-1 font-medium">
407+
<BranchPickerPrimitive.Number /> <span>/</span> <BranchPickerPrimitive.Count />
422408
</span>
423409
<BranchPickerPrimitive.Next asChild>
424410
<TooltipIconButton tooltip="Next">

‎apps/nextjs-example/app/test2/reasoning.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {
1010
CollapsibleTrigger,
1111
} from "@/components/ui/collapsible";
1212
import { cn } from "@/lib/utils";
13-
import { useScrollLock } from '../../../../packages-test-3/ai-chat/src/primitives/reasoning/use-scroll-lock';
14-
import { ReasoningGroupComponent, ReasoningMessagePartComponent } from "../../../../packages-test-3/ai-chat/src/types/message-part-component-types";
15-
import { useMessage } from "@creatorem/ai-chat/primitives/message/index";
13+
import { useScrollLock } from '@creatorem/ai-react/primitives/reasoning';
14+
import { ReasoningGroupComponent, ReasoningMessagePartComponent } from "@creatorem/ai-chat/types/message-part-component-types";
15+
import { useMessage } from "@creatorem/ai-chat/primitives/message";
1616

1717
const ANIMATION_DURATION = 200;
1818

‎apps/nextjs-example/app/test2/thread-list.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
import { Button } from "@/components/ui/button";
44
import { Skeleton } from "@/components/ui/skeleton";
5-
import * as ThreadListPrimitive from "@creatorem/ai-chat/primitives/thread-list/index";
6-
import * as ThreadListItemPrimitive from "@creatorem/ai-chat/primitives/thread-list-item/index";
7-
import * as ThreadListItemMorePrimitive from "@creatorem/ai-chat/primitives/thread-list-item-more/index";
8-
import { useThreads } from "@creatorem/ai-chat/primitives/ai-provider";
5+
import * as ThreadListPrimitive from "@creatorem/ai-react/primitives/thread-list";
6+
import * as ThreadListItemPrimitive from "@creatorem/ai-react/primitives/thread-list-item";
7+
import * as ThreadListItemMorePrimitive from "@creatorem/ai-react/primitives/thread-list-item-more";
8+
import { useThreads } from "@creatorem/ai-react/ai-provider";
99
import { ArchiveIcon, MoreHorizontalIcon, PlusIcon } from "lucide-react";
1010
import type { FC } from "react";
1111

‎apps/nextjs-example/app/test2/tool-fallback.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
import { useState } from "react";
88
import { Button } from "@/components/ui/button";
99
import { cn } from "@/lib/utils";
10-
import { ToolCallMessagePartComponent } from "../../../../packages-test-3/ai-chat/src/types/message-part-component-types";
10+
import { ToolCallMessagePartComponent } from "@creatorem/ai-chat/types/message-part-component-types";
1111

1212
export const ToolFallback: ToolCallMessagePartComponent = ({
1313
toolName,

‎apps/nextjs-example/app/test2/weather-tool-ui.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
"use client";
22

33
import { FC } from "react";
4-
import { useAssistantToolUI } from "@creatorem/ai-chat/primitives/model-context/index";
5-
import type { ToolCallMessagePartProps } from "../../../../packages-test-3/ai-chat/src/types/message-part-component-types";
4+
import { useAssistantToolUI } from "@creatorem/ai-react";
5+
import type { ToolCallMessagePartProps } from "@creatorem/ai-chat/types/message-part-component-types";
66

77
const HOUR_LABELS = ["1PM", "2PM", "3PM", "4PM", "5PM"] as const;
88

‎apps/nextjs-example/package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,11 @@
1818
"dependencies": {
1919
"@ai-sdk/openai": "^3.0.19",
2020
"@ai-sdk/react": "^3.0.71",
21-
"@creatorem/ai-assistant-react": "workspace:*",
2221
"@creatorem/ai-chat": "workspace:*",
23-
"@creatorem/ai-assistant-react-markdown": "workspace:*",
2422
"@creatorem/ai-react": "workspace:*",
25-
"@creatorem/ai-sdk": "workspace:*",
26-
"@creatorem/ai-store": "workspace:*",
27-
"@creatorem/ai-chat": "workspace:*",
23+
"@creatorem/ai-assistant-react": "workspace:*",
24+
"@creatorem/ai-assistant-react-markdown": "workspace:*",
25+
"@creatorem/stream": "workspace:*",
2826
"@radix-ui/react-avatar": "^1.1.11",
2927
"@radix-ui/react-collapsible": "^1.1.12",
3028
"@radix-ui/react-dialog": "^1.1.15",

‎apps/nextjs-example/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
}
2020
],
2121
"paths": {
22-
"@/*": ["./*"]
22+
"@/*": ["./*"],
23+
"@creatorem/ai-chat/component-types": ["./@types/components.d.ts"],
2324
}
2425
},
2526
"include": [

0 commit comments

Comments
 (0)