@applica-software-guru/persona-sdk 0.0.1-preview0

package/playground/src/components/assistant-ui/markdown-text.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import '@assistant-ui/react-markdown/styles/dot.css';
+
+import {
+  CodeHeaderProps,
+  MarkdownTextPrimitive,
+  unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+  useIsMarkdownCodeBlock,
+} from '@assistant-ui/react-markdown';
+import remarkGfm from 'remark-gfm';
+import { FC, memo, useState } from 'react';
+import { CheckIcon, CopyIcon } from 'lucide-react';
+
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button';
+import { cn } from '@/lib/utils';
+
+const MarkdownTextImpl = () => {
+  return <MarkdownTextPrimitive remarkPlugins={[remarkGfm]} className="aui-md" components={defaultComponents} />;
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
+
+const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied) return;
+    copyToClipboard(code);
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
+      <span className="lowercase [&>span]:text-xs">{language}</span>
+      <TooltipIconButton tooltip="Copy" onClick={onCopy}>
+        {!isCopied && <CopyIcon />}
+        {isCopied && <CheckIcon />}
+      </TooltipIconButton>
+    </div>
+  );
+};
+
+const useCopyToClipboard = ({
+  copiedDuration = 3000,
+}: {
+  copiedDuration?: number;
+} = {}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (!value) return;
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  };
+
+  return { isCopied, copyToClipboard };
+};
+
+const defaultComponents = memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => (
+    <h1 className={cn('mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0', className)} {...props} />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2 className={cn('mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0', className)} {...props} />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3 className={cn('mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0', className)} {...props} />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4 className={cn('mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0', className)} {...props} />
+  ),
+  h5: ({ className, ...props }) => <h5 className={cn('my-4 text-lg font-semibold first:mt-0 last:mb-0', className)} {...props} />,
+  h6: ({ className, ...props }) => <h6 className={cn('my-4 font-semibold first:mt-0 last:mb-0', className)} {...props} />,
+  p: ({ className, ...props }) => <p className={cn('mb-5 mt-5 leading-7 first:mt-0 last:mb-0', className)} {...props} />,
+  a: ({ className, ...props }) => <a className={cn('text-primary font-medium underline underline-offset-4', className)} {...props} />,
+  blockquote: ({ className, ...props }) => <blockquote className={cn('border-l-2 pl-6 italic', className)} {...props} />,
+  ul: ({ className, ...props }) => <ul className={cn('my-5 ml-6 list-disc [&>li]:mt-2', className)} {...props} />,
+  ol: ({ className, ...props }) => <ol className={cn('my-5 ml-6 list-decimal [&>li]:mt-2', className)} {...props} />,
+  hr: ({ className, ...props }) => <hr className={cn('my-5 border-b', className)} {...props} />,
+  table: ({ className, ...props }) => (
+    <table className={cn('my-5 w-full border-separate border-spacing-0 overflow-y-auto', className)} {...props} />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(
+        'bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        'border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  tr: ({ className, ...props }) => (
+    <tr
+      className={cn(
+        'm-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  sup: ({ className, ...props }) => <sup className={cn('[&>a]:text-xs [&>a]:no-underline', className)} {...props} />,
+  pre: ({ className, ...props }) => <pre className={cn('overflow-x-auto rounded-b-lg bg-black p-4 text-white', className)} {...props} />,
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return <code className={cn(!isCodeBlock && 'bg-muted rounded border font-semibold', className)} {...props} />;
+  },
+  CodeHeader,
+});

package/playground/src/components/assistant-ui/thread-list.tsx

@@ -0,0 +1,62 @@
+import type { FC } from 'react';
+import { ThreadListItemPrimitive, ThreadListPrimitive } from '@assistant-ui/react';
+import { ArchiveIcon, PlusIcon } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button';
+
+export const ThreadList: FC = () => {
+  return (
+    <ThreadListPrimitive.Root className="flex flex-col items-stretch gap-1.5">
+      <ThreadListNew />
+      <ThreadListItems />
+    </ThreadListPrimitive.Root>
+  );
+};
+
+const ThreadListNew: FC = () => {
+  return (
+    <ThreadListPrimitive.New asChild>
+      <Button
+        className="data-[active]:bg-muted hover:bg-muted flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start"
+        variant="ghost"
+      >
+        <PlusIcon />
+        New Thread
+      </Button>
+    </ThreadListPrimitive.New>
+  );
+};
+
+const ThreadListItems: FC = () => {
+  return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
+};
+
+const ThreadListItem: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Root className="data-[active]:bg-muted hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring flex items-center gap-2 rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2">
+      <ThreadListItemPrimitive.Trigger className="flex-grow px-3 py-2 text-start">
+        <ThreadListItemTitle />
+      </ThreadListItemPrimitive.Trigger>
+      <ThreadListItemArchive />
+    </ThreadListItemPrimitive.Root>
+  );
+};
+
+const ThreadListItemTitle: FC = () => {
+  return (
+    <p className="text-sm">
+      <ThreadListItemPrimitive.Title fallback="New Chat" />
+    </p>
+  );
+};
+
+const ThreadListItemArchive: FC = () => {
+  return (
+    <ThreadListItemPrimitive.Archive asChild>
+      <TooltipIconButton className="hover:text-primary text-foreground ml-auto mr-3 size-4 p-0" variant="ghost" tooltip="Archive thread">
+        <ArchiveIcon />
+      </TooltipIconButton>
+    </ThreadListItemPrimitive.Archive>
+  );
+};

package/playground/src/components/assistant-ui/thread.tsx

@@ -0,0 +1,249 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  ActionBarPrimitive,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ReasoningContentPartProps,
+  ThreadPrimitive,
+} from '@assistant-ui/react';
+import { useCallback, useMemo, type FC } from 'react';
+import { ArrowDownIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, SendHorizontalIcon, MicIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+import { Button } from '@/components/ui/button';
+import { MarkdownText } from '@/components/assistant-ui/markdown-text';
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button';
+import { ToolFallback } from '@/components/assistant-ui/tool-fallback';
+
+import { usePersonaRuntimeWebRTCProtocol } from '@applica-software-guru/persona-sdk';
+
+export const Thread: FC = () => {
+  return (
+    <ThreadPrimitive.Root
+      className="bg-background box-border flex h-full flex-col overflow-hidden"
+      style={{
+        ['--thread-max-width' as string]: '42rem',
+      }}
+    >
+      <ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-scroll scroll-smooth bg-inherit px-4 pt-8">
+        <ThreadWelcome />
+
+        <ThreadPrimitive.Messages
+          components={{
+            UserMessage: UserMessage,
+            EditComposer: EditComposer,
+            AssistantMessage: AssistantMessage,
+          }}
+        />
+
+        <ThreadPrimitive.If empty={false}>
+          <div className="min-h-8 flex-grow" />
+        </ThreadPrimitive.If>
+
+        <div className="sticky bottom-0 mt-3 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end rounded-t-lg bg-inherit pb-4">
+          <ThreadScrollToBottom />
+          <Composer />
+        </div>
+      </ThreadPrimitive.Viewport>
+    </ThreadPrimitive.Root>
+  );
+};
+
+const ThreadScrollToBottom: FC = () => {
+  return (
+    <ThreadPrimitive.ScrollToBottom asChild>
+      <TooltipIconButton tooltip="Scroll to bottom" variant="outline" className="absolute -top-8 rounded-full disabled:invisible">
+        <ArrowDownIcon />
+      </TooltipIconButton>
+    </ThreadPrimitive.ScrollToBottom>
+  );
+};
+
+const ThreadWelcome: FC = () => {
+  return (
+    <ThreadPrimitive.Empty>
+      <div className="flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col">
+        <div className="flex w-full flex-grow flex-col items-center justify-center">
+          <p className="mt-4 font-medium">Come posso aiutarti oggi?</p>
+        </div>
+        {/* <ThreadWelcomeSuggestions /> */}
+      </div>
+    </ThreadPrimitive.Empty>
+  );
+};
+
+const Composer: FC = () => {
+  return (
+    <ComposerPrimitive.Root className="focus-within:border-ring/20 flex w-full flex-wrap items-end rounded-lg border bg-inherit px-2.5 shadow-sm transition-colors ease-in">
+      <ComposerPrimitive.Input
+        rows={1}
+        autoFocus
+        placeholder="Write a message..."
+        className="placeholder:text-muted-foreground max-h-40 flex-grow resize-none border-none bg-transparent px-2 py-4 text-base outline-none focus:ring-0 disabled:cursor-not-allowed"
+      />
+      <ComposerAction />
+    </ComposerPrimitive.Root>
+  );
+};
+
+const SpeakButton: FC = () => {
+  const webrtcProtocol = usePersonaRuntimeWebRTCProtocol()!;
+
+  const isConnected = useMemo(() => webrtcProtocol?.status === 'connected', [webrtcProtocol?.status]);
+  const handleConnection = useCallback(() => {
+    if (webrtcProtocol.status === 'connected') {
+      webrtcProtocol.disconnect();
+    } else {
+      webrtcProtocol.connect();
+    }
+  }, [webrtcProtocol]);
+
+  if (!webrtcProtocol) {
+    return null;
+  }
+  return (
+    <TooltipIconButton
+      className={cn(
+        'hover:text-primary my-2.5 size-8 p-2 ml-2 transition-opacity ease-in text-foreground cursor-pointer',
+        isConnected && 'animate-pulse text-blue-500',
+      )}
+      variant="default"
+      tooltip={isConnected ? 'Stop speaking' : 'Speak'}
+      onClick={handleConnection}
+    >
+      <MicIcon className={cn(isConnected && 'animate-pulse')} />
+    </TooltipIconButton>
+  );
+};
+
+const ComposerAction: FC = () => {
+  return (
+    <>
+      <ThreadPrimitive.If running={false}>
+        <ComposerPrimitive.Send asChild>
+          <TooltipIconButton tooltip="Send" variant="default" className="my-2.5 size-8 p-2 transition-opacity ease-in">
+            <SendHorizontalIcon />
+          </TooltipIconButton>
+        </ComposerPrimitive.Send>
+      </ThreadPrimitive.If>
+      <ThreadPrimitive.If running>
+        <ComposerPrimitive.Cancel asChild>
+          <TooltipIconButton tooltip="Cancel" variant="default" className="my-2.5 size-8 p-2 transition-opacity ease-in">
+            <CircleStopIcon />
+          </TooltipIconButton>
+        </ComposerPrimitive.Cancel>
+      </ThreadPrimitive.If>
+      <SpeakButton />
+    </>
+  );
+};
+
+const UserMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 [&:where(>*)]:col-start-2 w-full max-w-[var(--thread-max-width)] py-4">
+      <div className="bg-muted text-foreground max-w-[calc(var(--thread-max-width)*0.8)] break-words rounded-3xl px-5 py-2.5 col-start-2 row-start-2">
+        <MessagePrimitive.Content />
+      </div>
+
+      <BranchPicker className="col-span-full col-start-1 row-start-3 -mr-1 justify-end" />
+    </MessagePrimitive.Root>
+  );
+};
+
+const EditComposer: FC = () => {
+  return (
+    <ComposerPrimitive.Root className="bg-muted my-4 flex w-full max-w-[var(--thread-max-width)] flex-col gap-2 rounded-xl">
+      <ComposerPrimitive.Input className="text-foreground flex h-8 w-full resize-none bg-transparent p-4 pb-0 outline-none" />
+
+      <div className="mx-3 mb-3 flex items-center justify-center gap-2 self-end">
+        <ComposerPrimitive.Cancel asChild>
+          <Button variant="ghost">Cancel</Button>
+        </ComposerPrimitive.Cancel>
+        <ComposerPrimitive.Send asChild>
+          <Button>Send</Button>
+        </ComposerPrimitive.Send>
+      </div>
+    </ComposerPrimitive.Root>
+  );
+};
+
+const Reasoning: FC<ReasoningContentPartProps> = ({ text }: ReasoningContentPartProps) => {
+  return <div className="text-sm text-muted-foreground break-words whitespace-pre-wrap">{text}</div>;
+};
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="grid grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] relative w-full max-w-[var(--thread-max-width)] py-4">
+      <div className="text-foreground max-w-[calc(var(--thread-max-width)*0.8)] break-words leading-7 col-span-2 col-start-2 row-start-1 my-1.5">
+        <MessagePrimitive.Content
+          components={{
+            Text: MarkdownText,
+            Reasoning,
+            tools: {
+              Fallback: ToolFallback,
+            },
+          }}
+        />
+      </div>
+
+      <AssistantActionBar />
+
+      <BranchPicker className="col-start-2 row-start-2 -ml-2 mr-2" />
+    </MessagePrimitive.Root>
+  );
+};
+
+const AssistantActionBar: FC = () => {
+  return (
+    <ActionBarPrimitive.Root
+      hideWhenRunning
+      autohide="not-last"
+      autohideFloat="single-branch"
+      className="text-muted-foreground flex gap-1 col-start-3 row-start-2 -ml-1 data-[floating]:bg-background data-[floating]:absolute data-[floating]:rounded-md data-[floating]:border data-[floating]:p-1 data-[floating]:shadow-sm"
+    >
+      <ActionBarPrimitive.Copy asChild>
+        <TooltipIconButton tooltip="Copy">
+          <MessagePrimitive.If copied>
+            <CheckIcon />
+          </MessagePrimitive.If>
+          <MessagePrimitive.If copied={false}>
+            <CopyIcon />
+          </MessagePrimitive.If>
+        </TooltipIconButton>
+      </ActionBarPrimitive.Copy>
+    </ActionBarPrimitive.Root>
+  );
+};
+
+const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({ className, ...rest }) => {
+  return (
+    <BranchPickerPrimitive.Root
+      hideWhenSingleBranch
+      className={cn('text-muted-foreground inline-flex items-center text-xs', className)}
+      {...rest}
+    >
+      <BranchPickerPrimitive.Previous asChild>
+        <TooltipIconButton tooltip="Previous">
+          <ChevronLeftIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Previous>
+      <span className="font-medium">
+        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+      </span>
+      <BranchPickerPrimitive.Next asChild>
+        <TooltipIconButton tooltip="Next">
+          <ChevronRightIcon />
+        </TooltipIconButton>
+      </BranchPickerPrimitive.Next>
+    </BranchPickerPrimitive.Root>
+  );
+};
+
+const CircleStopIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16">
+      <rect width="10" height="10" x="3" y="3" rx="2" />
+    </svg>
+  );
+};

package/playground/src/components/assistant-ui/tool-fallback.tsx

@@ -0,0 +1,33 @@
+import { ToolCallContentPartComponent } from '@assistant-ui/react';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../ui/button';
+
+export const ToolFallback: ToolCallContentPartComponent = ({ toolName, argsText, result }) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  return (
+    <div className="mb-4 flex w-full flex-col gap-3 rounded-lg border py-3">
+      <div className="flex items-center gap-2 px-4">
+        <CheckIcon className="size-4" />
+        <p className="">
+          Used tool: <b>{toolName}</b>
+        </p>
+        <div className="flex-grow" />
+        <Button onClick={() => setIsCollapsed(!isCollapsed)}>{isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}</Button>
+      </div>
+      {!isCollapsed && (
+        <div className="flex flex-col gap-2 border-t pt-2">
+          <div className="px-4">
+            <pre className="whitespace-pre-wrap">{argsText}</pre>
+          </div>
+          {result !== undefined && (
+            <div className="border-t border-dashed px-4 pt-2">
+              <p className="font-semibold">Result:</p>
+              <pre className="whitespace-pre-wrap">{typeof result === 'string' ? result : JSON.stringify(result, null, 2)}</pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/playground/src/components/assistant-ui/tooltip-icon-button.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export type TooltipIconButtonProps = ComponentPropsWithoutRef<typeof Button> & {
+  tooltip: string;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+};
+
+export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
+  ({ children, tooltip, side = 'bottom', className, ...rest }, ref) => {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              // variant="ghost"
+              // size="icon"
+              {...rest}
+              className={cn('size-6 p-1', className)}
+              ref={ref}
+            >
+              {children}
+              <span className="sr-only">{tooltip}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side={side}>{tooltip}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  },
+);
+
+TooltipIconButton.displayName = 'TooltipIconButton';

package/playground/src/components/ui/avatar.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>>(
+  ({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root ref={ref} className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)} {...props} />
+  ),
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/playground/src/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+});
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/playground/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/playground/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/playground/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { Chat } from './chat';
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <React.StrictMode>
+    <Chat />
+  </React.StrictMode>,
+);

package/playground/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/playground/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/preview.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+# Check if an argument is provided
+if [ -z "$1" ]; then
+  echo "Usage: $0 <preview-tag>"
+  exit 1
+fi
+
+PREVIEW_TAG=$1
+
+npm --no-git-tag-version version "0.0.1-$PREVIEW_TAG" -m "$PREVIEW_TAG"
+npm run build
+npm publish --tag "$PREVIEW_TAG" --access public

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './runtime';
+export * from './logging';
+export * from './protocol';
+export * from './types';