@applica-software-guru/persona-sdk 0.1.83 → 0.1.85

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

@@ -1,13 +1,18 @@
-import type { FC } from 'react';
-import { ThreadListItemPrimitive, ThreadListPrimitive } from '@assistant-ui/react';
-import { ArchiveIcon, PlusIcon } from 'lucide-react';
+import type { FC } from "react";
+import {
+  ThreadListItemPrimitive,
+  ThreadListPrimitive,
+  useAssistantState,
+} 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';
+import { Button } from "@/components/ui/button";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export const ThreadList: FC = () => {
   return (
-    <ThreadListPrimitive.Root className="flex flex-col items-stretch gap-1.5">
+    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex flex-col items-stretch gap-1.5">
       <ThreadListNew />
       <ThreadListItems />
     </ThreadListPrimitive.Root>
@@ -18,7 +23,7 @@ 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"
+        className="aui-thread-list-new flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start hover:bg-muted data-active:bg-muted"
         variant="ghost"
       >
         <PlusIcon />
@@ -29,13 +34,37 @@ const ThreadListNew: FC = () => {
 };
 
 const ThreadListItems: FC = () => {
+  const isLoading = useAssistantState(({ threads }) => threads.isLoading);
+
+  if (isLoading) {
+    return <ThreadListSkeleton />;
+  }
+
   return <ThreadListPrimitive.Items components={{ ThreadListItem }} />;
 };
 
+const ThreadListSkeleton: FC = () => {
+  return (
+    <>
+      {Array.from({ length: 5 }, (_, i) => (
+        <div
+          key={i}
+          role="status"
+          aria-label="Loading threads"
+          aria-live="polite"
+          className="aui-thread-list-skeleton-wrapper flex items-center gap-2 rounded-md px-3 py-2"
+        >
+          <Skeleton className="aui-thread-list-skeleton h-[22px] grow" />
+        </div>
+      ))}
+    </>
+  );
+};
+
 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">
+    <ThreadListItemPrimitive.Root className="aui-thread-list-item flex items-center gap-2 rounded-lg transition-all hover:bg-muted focus-visible:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-active:bg-muted">
+      <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger grow px-3 py-2 text-start">
         <ThreadListItemTitle />
       </ThreadListItemPrimitive.Trigger>
       <ThreadListItemArchive />
@@ -45,16 +74,20 @@ const ThreadListItem: FC = () => {
 
 const ThreadListItemTitle: FC = () => {
   return (
-    <p className="text-sm">
+    <span className="aui-thread-list-item-title text-sm">
       <ThreadListItemPrimitive.Title fallback="New Chat" />
-    </p>
+    </span>
   );
 };
 
 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">
+      <TooltipIconButton
+        className="aui-thread-list-item-archive mr-3 ml-auto size-4 p-0 text-foreground hover:text-primary"
+        variant="ghost"
+        tooltip="Archive thread"
+      >
         <ArchiveIcon />
       </TooltipIconButton>
     </ThreadListItemPrimitive.Archive>

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

@@ -1,44 +1,21 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CheckIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CopyIcon,
-  PencilIcon,
-  RefreshCwIcon,
-  Square,
-} from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, CopyIcon, RefreshCwIcon, Square } from 'lucide-react';
 
-import {
-  ActionBarPrimitive,
-  BranchPickerPrimitive,
-  ComposerPrimitive,
-  ErrorPrimitive,
-  MessagePrimitive,
-  ThreadPrimitive,
-} from "@assistant-ui/react";
+import { ActionBarPrimitive, ComposerPrimitive, ErrorPrimitive, MessagePrimitive, ThreadPrimitive } from '@assistant-ui/react';
 
-import type { FC } from "react";
+import type { FC } from 'react';
 
-import { Button } from "@/components/ui/button";
-import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import {
-  ComposerAddAttachment,
-  ComposerAttachments,
-  UserMessageAttachments,
-} from "@/components/assistant-ui/attachment";
-
-import { cn } from "@/lib/utils";
+import { Button } from '@/components/ui/button';
+import { MarkdownText } from '@/components/assistant-ui/markdown-text';
+import { ToolFallback } from '@/components/assistant-ui/tool-fallback';
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button';
+import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } from '@/components/assistant-ui/attachment';
 
 export const Thread: FC = () => {
   return (
     <ThreadPrimitive.Root
       className="aui-root aui-thread-root @container flex h-full flex-col bg-background"
       style={{
-        ["--thread-max-width" as string]: "44rem",
+        ['--thread-max-width' as string]: '44rem',
       }}
     >
       <ThreadPrimitive.Viewport
@@ -104,23 +81,23 @@ const ThreadSuggestions: FC = () => {
       {[
         {
           title: "What's the weather",
-          label: "in San Francisco?",
+          label: 'in San Francisco?',
           action: "What's the weather in San Francisco?",
         },
         {
-          title: "Explain React hooks",
-          label: "like useState and useEffect",
-          action: "Explain React hooks like useState and useEffect",
+          title: 'Explain React hooks',
+          label: 'like useState and useEffect',
+          action: 'Explain React hooks like useState and useEffect',
         },
         {
-          title: "Write a SQL query",
-          label: "to find top customers",
-          action: "Write a SQL query to find top customers",
+          title: 'Write a SQL query',
+          label: 'to find top customers',
+          action: 'Write a SQL query to find top customers',
         },
         {
-          title: "Create a meal plan",
-          label: "for healthy weight loss",
-          action: "Create a meal plan for healthy weight loss",
+          title: 'Create a meal plan',
+          label: 'for healthy weight loss',
+          action: 'Create a meal plan for healthy weight loss',
         },
       ].map((suggestedAction, index) => (
         <div
@@ -128,22 +105,14 @@ const ThreadSuggestions: FC = () => {
           className="aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-4 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-300 ease-out"
           style={{ animationDelay: `${index * 50}ms` }}
         >
-          <ThreadPrimitive.Suggestion
-            prompt={suggestedAction.action}
-            send
-            asChild
-          >
+          <ThreadPrimitive.Suggestion prompt={suggestedAction.action} send asChild>
             <Button
               variant="ghost"
               className="aui-thread-welcome-suggestion h-auto w-full flex-1 @md:flex-col flex-wrap items-start justify-start gap-1 rounded-3xl border px-5 py-4 text-left text-sm dark:hover:bg-accent/60"
               aria-label={suggestedAction.action}
             >
-              <span className="aui-thread-welcome-suggestion-text-1 font-medium">
-                {suggestedAction.title}
-              </span>
-              <span className="aui-thread-welcome-suggestion-text-2 text-muted-foreground">
-                {suggestedAction.label}
-              </span>
+              <span className="aui-thread-welcome-suggestion-text-1 font-medium">{suggestedAction.title}</span>
+              <span className="aui-thread-welcome-suggestion-text-2 text-muted-foreground">{suggestedAction.label}</span>
             </Button>
           </ThreadPrimitive.Suggestion>
         </div>
@@ -218,6 +187,15 @@ const MessageError: FC = () => {
   );
 };
 
+const ReasoningContent: FC<{ text: string }> = ({ text }) => {
+  return (
+    <div className="aui-reasoning-content my-2 rounded-lg border border-muted bg-muted/30 p-3 text-muted-foreground text-sm italic">
+      <div className="mb-1 font-semibold text-xs uppercase tracking-wide">Thinking...</div>
+      <div>{text}</div>
+    </div>
+  );
+};
+
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root
@@ -228,6 +206,7 @@ const AssistantMessage: FC = () => {
         <MessagePrimitive.Parts
           components={{
             Text: MarkdownText,
+            Reasoning: ReasoningContent,
             tools: { Fallback: ToolFallback },
           }}
         />
@@ -235,7 +214,6 @@ const AssistantMessage: FC = () => {
       </div>
 
       <div className="aui-assistant-message-footer mt-2 ml-2 flex">
-        <BranchPicker />
         <AssistantActionBar />
       </div>
     </MessagePrimitive.Root>
@@ -285,24 +263,14 @@ const UserMessage: FC = () => {
           <UserActionBar />
         </div>
       </div>
-
-      <BranchPicker className="aui-user-branch-picker -mr-1 col-span-full col-start-1 row-start-3 justify-end" />
     </MessagePrimitive.Root>
   );
 };
 
 const UserActionBar: FC = () => {
   return (
-    <ActionBarPrimitive.Root
-      hideWhenRunning
-      autohide="not-last"
-      className="aui-user-action-bar-root flex flex-col items-end"
-    >
-      <ActionBarPrimitive.Edit asChild>
-        <TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
-          <PencilIcon />
-        </TooltipIconButton>
-      </ActionBarPrimitive.Edit>
+    <ActionBarPrimitive.Root hideWhenRunning autohide="not-last" className="aui-user-action-bar-root flex flex-col items-end">
+      {/* Edit button disabled */}
     </ActionBarPrimitive.Root>
   );
 };
@@ -332,33 +300,3 @@ const EditComposer: FC = () => {
     </MessagePrimitive.Root>
   );
 };
-
-const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
-  className,
-  ...rest
-}) => {
-  return (
-    <BranchPickerPrimitive.Root
-      hideWhenSingleBranch
-      className={cn(
-        "aui-branch-picker-root -ml-2 mr-2 inline-flex items-center text-muted-foreground text-xs",
-        className,
-      )}
-      {...rest}
-    >
-      <BranchPickerPrimitive.Previous asChild>
-        <TooltipIconButton tooltip="Previous">
-          <ChevronLeftIcon />
-        </TooltipIconButton>
-      </BranchPickerPrimitive.Previous>
-      <span className="aui-branch-picker-state font-medium">
-        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
-      </span>
-      <BranchPickerPrimitive.Next asChild>
-        <TooltipIconButton tooltip="Next">
-          <ChevronRightIcon />
-        </TooltipIconButton>
-      </BranchPickerPrimitive.Next>
-    </BranchPickerPrimitive.Root>
-  );
-};

package/playground/src/components/assistant-ui/threadlist-sidebar.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Github, MessagesSquare } from 'lucide-react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from '@/components/ui/sidebar';
+import { ThreadList } from '@/components/assistant-ui/thread-list';
+
+export function ThreadListSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader className="aui-sidebar-header mb-2 border-b">
+        <div className="aui-sidebar-header-content flex items-center justify-between">
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild>
+                <a href="https://assistant-ui.com" target="_blank" rel="noopener noreferrer">
+                  <div className="aui-sidebar-header-icon-wrapper flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                    <MessagesSquare className="aui-sidebar-header-icon size-4" />
+                  </div>
+                  <div className="aui-sidebar-header-heading mr-6 flex flex-col gap-0.5 leading-none">
+                    <span className="aui-sidebar-header-title font-semibold">assistant-ui</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </div>
+      </SidebarHeader>
+      <SidebarContent className="aui-sidebar-content px-2">
+        <ThreadList />
+      </SidebarContent>
+      <SidebarRail />
+      <SidebarFooter className="aui-sidebar-footer border-t">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <a href="https://github.com/assistant-ui/assistant-ui" target="_blank">
+                <div className="aui-sidebar-footer-icon-wrapper flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <Github className="aui-sidebar-footer-icon size-4" />
+                </div>
+                <div className="aui-sidebar-footer-heading flex flex-col gap-0.5 leading-none">
+                  <span className="aui-sidebar-footer-title font-semibold">GitHub</span>
+                  <span>View Source</span>
+                </div>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/playground/src/components/chat/logging.tsx

@@ -0,0 +1,53 @@
+import { usePersonaRuntimeEndpoint, usePersonaRuntimeMessages } from '@applica-software-guru/persona-sdk';
+import { useMemo } from 'react';
+import _ from 'lodash';
+
+function MessageLogger() {
+  const messages = usePersonaRuntimeMessages();
+  const { reasoning, user, assistant, sources } = useMemo(() => {
+    const reasoning = _.filter(messages, (message) => message.role === 'assistant' && message.type === 'reasoning').length;
+    const user = _.filter(messages, (message) => message.role === 'user').length;
+    const assistant = _.filter(messages, (message) => message.role === 'assistant').length;
+    const sources = _.filter(messages, (message) => message.role === 'assistant' && message.sources).length;
+    return { reasoning, user, assistant, sources };
+  }, [messages]);
+  return (
+    <div className="absolute top-0 left-0 w-30 h-40 overflow-y-auto m-2 box-border border-gray-300 rounded-lg shadow-lg p-2">
+      <h3 className="text-md font-bold mb-2">Messages</h3>
+      <p className="top-0 left-0 bg-white text-black text-sm">
+        <span className="text-gray-500">
+          User: <span className="font-bold">{user}</span>
+        </span>
+        <br />
+        <span className="text-gray-500">
+          Assistant: <span className="font-bold">{assistant}</span>
+        </span>
+        <br />
+        <span className="text-gray-500">
+          Reasoning: <span className="font-bold">{reasoning}</span>
+        </span>
+        <br />
+        <span className="text-gray-500">
+          Sources: <span className="font-bold">{sources}</span>
+        </span>
+        <br />
+        <span className="text-gray-500">
+          Total: <span className="font-bold">{messages.length}</span>
+        </span>
+        <br />
+      </p>
+    </div>
+  );
+}
+
+function EndpointLogger() {
+  const endpoint = usePersonaRuntimeEndpoint();
+  return (
+    <div className="absolute top-0 right-0 w-50 h-40 overflow-y-auto m-2 box-border border-gray-300 rounded-lg shadow-lg p-2">
+      <h3 className="text-md font-bold mb-2">Endpoint</h3>
+      <p className="top-0 left-0 bg-white text-black text-sm">{endpoint || 'No endpoint available'}</p>
+    </div>
+  );
+}
+
+export { MessageLogger, EndpointLogger };

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

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

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

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

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

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}