@applica-software-guru/persona-sdk 0.1.79 → 0.1.82

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

@@ -1,121 +1,66 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  ActionBarPrimitive,
-  BranchPickerPrimitive,
-  ComposerPrimitive,
-  FileContentPart,
-  ImageContentPart,
-  MessagePrimitive,
-  ReasoningContentPartProps,
-  ThreadPrimitive,
-} from '@assistant-ui/react';
-import { JSX, useCallback, useMemo, useState, type FC } from 'react';
 import {
   ArrowDownIcon,
+  ArrowUpIcon,
   CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   CopyIcon,
-  SendHorizontalIcon,
-  MicIcon,
-  FileIcon,
-  ImageIcon,
-  ArchiveIcon,
-  ChevronUpIcon,
-  LightbulbIcon,
-  ChevronDownIcon,
-} 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 { usePersonaRuntimeEndpoint, usePersonaRuntimeWebRTCProtocol } from '@applica-software-guru/persona-sdk';
-import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } from './attachment';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+  PencilIcon,
+  RefreshCwIcon,
+  Square,
+} from "lucide-react";
 
-const Reasoning: FC<ReasoningContentPartProps> = ({ type, text, status }: ReasoningContentPartProps) => {
-  const [open, setOpen] = useState(false);
-  let isThinking = status.type === 'running' && type === 'reasoning';
+import {
+  ActionBarPrimitive,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  ErrorPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+} from "@assistant-ui/react";
 
-  const regex = /\*\*(.*?)\*\*/gs; // g = globale, s = multilinea ( . include \n )
-  const matches = [...text.matchAll(regex)];
-  let title = matches.length > 0 ? matches[matches.length - 1][1] : 'Thinking';
-  if (isThinking) {
-    title = `${title}...`;
-  } else {
-    title = `Done thinking!`;
-  }
-  const rest = text;
+import type { FC } from "react";
 
-  return (
-    <div
-      className={`flex flex-col gap-2 border border-gray-200 bg-gray-50 rounded-lg p-2 shadow-sm transition-opacity duration-500 opacity-100`}
-    >
-      <div className="flex items-start gap-2">
-        <LightbulbIcon className="text-orange-400" />
+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";
 
-        <span className="font-normal flex-1 min-w-0 text-sm self-center">
-          <span className="align-bottom">
-            <span className={`text-gray-700 ${isThinking ? 'animate-pulse' : ''}`}>
-              <b>{title}</b>
-            </span>
-            {open && (
-              <div className="mt-4 border-l-2 rounded border-gray-200 pl-4 text-sm text-gray-900 flex flex-col gap-2">
-                <div className="bg-gray-100 rounded px-3 py-2">
-                  <div className="whitespace-pre-wrap text-gray-900">
-                    <Markdown remarkPlugins={[remarkGfm]}>{rest}</Markdown>
-                  </div>
-                </div>
-              </div>
-            )}
-          </span>
-        </span>
+import { cn } from "@/lib/utils";
 
-        <div className="flex-0 ml-2 flex justify-end w-auto">
-          <button
-            className="p-1 rounded hover:bg-gray-100 transition-colors"
-            aria-label={open ? 'Show reasoning' : 'Hide reasoning'}
-            onClick={() => setOpen((v) => !v)}
-            type="button"
-          >
-            {open ? <ChevronUpIcon className="size-4" /> : <ChevronDownIcon className="size-4" />}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
 export const Thread: FC = () => {
   return (
     <ThreadPrimitive.Root
-      className="bg-background box-border flex h-full flex-col overflow-hidden"
+      className="aui-root aui-thread-root @container flex h-full flex-col bg-background"
       style={{
-        ['--thread-max-width' as string]: '42rem',
+        ["--thread-max-width" as string]: "44rem",
       }}
     >
-      <ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-scroll scroll-smooth bg-inherit px-4 pt-8">
-        <ThreadWelcome />
+      <ThreadPrimitive.Viewport
+        turnAnchor="top"
+        className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4"
+      >
+        <ThreadPrimitive.If empty>
+          <ThreadWelcome />
+        </ThreadPrimitive.If>
 
         <ThreadPrimitive.Messages
           components={{
-            UserMessage: UserMessage,
-            EditComposer: EditComposer,
-            AssistantMessage: AssistantMessage,
+            UserMessage,
+            EditComposer,
+            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">
+        <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-4 flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
           <ThreadScrollToBottom />
           <Composer />
-        </div>
+        </ThreadPrimitive.ViewportFooter>
       </ThreadPrimitive.Viewport>
     </ThreadPrimitive.Root>
   );
@@ -124,7 +69,11 @@ export const Thread: FC = () => {
 const ThreadScrollToBottom: FC = () => {
   return (
     <ThreadPrimitive.ScrollToBottom asChild>
-      <TooltipIconButton tooltip="Scroll to bottom" variant="outline" className="absolute -top-8 rounded-full disabled:invisible">
+      <TooltipIconButton
+        tooltip="Scroll to bottom"
+        variant="outline"
+        className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
+      >
         <ArrowDownIcon />
       </TooltipIconButton>
     </ThreadPrimitive.ScrollToBottom>
@@ -133,175 +82,162 @@ const ThreadScrollToBottom: FC = () => {
 
 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 className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col">
+      <div className="aui-thread-welcome-center flex w-full grow flex-col items-center justify-center">
+        <div className="aui-thread-welcome-message flex size-full flex-col justify-center px-8">
+          <div className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-2 animate-in font-semibold text-2xl duration-300 ease-out">
+            Hello there!
+          </div>
+          <div className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-2 animate-in text-2xl text-muted-foreground/65 delay-100 duration-300 ease-out">
+            How can I help you today?
+          </div>
         </div>
-        {/* <ThreadWelcomeSuggestions /> */}
       </div>
-    </ThreadPrimitive.Empty>
+      <ThreadSuggestions />
+    </div>
   );
 };
 
-const Composer: FC = () => {
+const ThreadSuggestions: 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">
-      <ComposerAttachments />
-      <ComposerAddAttachment />
-      <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>
+    <div className="aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4">
+      {[
+        {
+          title: "What's the weather",
+          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: "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",
+        },
+      ].map((suggestedAction, index) => (
+        <div
+          key={`suggested-action-${suggestedAction.title}-${index}`}
+          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
+          >
+            <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>
+            </Button>
+          </ThreadPrimitive.Suggestion>
+        </div>
+      ))}
+    </div>
   );
 };
 
-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;
-  }
+const Composer: FC = () => {
   return (
-    <TooltipIconButton
-      className={cn(
-        'hover:text-primary my-2.5 size-8 p-2 ml-2 transition-opacity ease-in cursor-pointer',
-        isConnected && 'animate-pulse text-blue-500',
-      )}
-      variant="default"
-      tooltip={isConnected ? 'Stop speaking' : 'Speak'}
-      onClick={handleConnection}
-    >
-      <MicIcon className={cn(isConnected && 'animate-pulse')} />
-    </TooltipIconButton>
+    <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
+      <ComposerPrimitive.AttachmentDropzone className="aui-composer-attachment-dropzone flex w-full flex-col rounded-3xl border border-input bg-background px-1 pt-2 shadow-xs outline-none transition-[color,box-shadow] has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-[3px] has-[textarea:focus-visible]:ring-ring/50 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50 dark:bg-background">
+        <ComposerAttachments />
+        <ComposerPrimitive.Input
+          placeholder="Send a message..."
+          className="aui-composer-input mb-1 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pt-1.5 pb-3 text-base outline-none placeholder:text-muted-foreground focus-visible:ring-0"
+          rows={1}
+          autoFocus
+          aria-label="Message input"
+        />
+        <ComposerAction />
+      </ComposerPrimitive.AttachmentDropzone>
+    </ComposerPrimitive.Root>
   );
 };
 
 const ComposerAction: FC = () => {
   return (
-    <>
+    <div className="aui-composer-action-wrapper relative mx-1 mt-2 mb-2 flex items-center justify-between">
+      <ComposerAddAttachment />
+
       <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
+            tooltip="Send message"
+            side="bottom"
+            type="submit"
+            variant="default"
+            size="icon"
+            className="aui-composer-send size-[34px] rounded-full p-1"
+            aria-label="Send message"
+          >
+            <ArrowUpIcon className="aui-composer-send-icon size-5" />
           </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>
+          <Button
+            type="button"
+            variant="default"
+            size="icon"
+            className="aui-composer-cancel size-[34px] rounded-full border border-muted-foreground/60 hover:bg-primary/75 dark:border-muted-foreground/90"
+            aria-label="Stop generating"
+          >
+            <Square className="aui-composer-cancel-icon size-3.5 fill-white dark:fill-black" />
+          </Button>
         </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">
-        <UserMessageAttachments />
-        <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 Image: FC<ImageContentPart> = ({ image }: ImageContentPart) => {
-  const baseEndpoint = usePersonaRuntimeEndpoint();
-  return (
-    <div className="flex items-center gap-2 border rounded-lg border-muted bg-muted p-4 my-2">
-      <img src={`${baseEndpoint}/files/${image}`} alt="Image" className="max-h-96 max-w-full rounded-lg object-cover" />
     </div>
   );
 };
 
-const File: FC<FileContentPart> = ({ data, mimeType }) => {
-  const isImage = useMemo(() => mimeType.startsWith('image/'), [mimeType]);
-  if (isImage) {
-    return <Image image={data} type="image" />;
-  }
-  const fileName = useMemo(() => {
-    const parts = data.split('/');
-    return parts[parts.length - 1];
-  }, [data]);
-  const baseEndpoint = usePersonaRuntimeEndpoint();
-  const getIconByMimeType = (mimeType: string) => {
-    const iconMap: Record<string, JSX.Element> = {
-      'application/pdf': <FileIcon />,
-      'image/png': <ImageIcon />,
-      'image/jpeg': <ImageIcon />,
-      'application/zip': <ArchiveIcon />,
-    };
-
-    return iconMap[mimeType] || <FileIcon />;
-  };
-  const icon = getIconByMimeType(mimeType);
-
+const MessageError: FC = () => {
   return (
-    <div className="flex items-center gap-2 border rounded-lg border-muted bg-muted p-4 my-2">
-      <div className="text-muted-foreground">{icon}</div>
-      <a target="_blank" href={`${baseEndpoint}/files/${data}`} download={fileName} className="text-md text-muted-foreground">
-        {fileName}
-      </a>
-    </div>
+    <MessagePrimitive.Error>
+      <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">
+        <ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
+      </ErrorPrimitive.Root>
+    </MessagePrimitive.Error>
   );
 };
 
 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
+    <MessagePrimitive.Root
+      className="aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-4 duration-150 ease-out"
+      data-role="assistant"
+    >
+      <div className="aui-assistant-message-content wrap-break-word mx-2 text-foreground leading-7">
+        <MessagePrimitive.Parts
           components={{
             Text: MarkdownText,
-            File,
-            Reasoning,
-            tools: {
-              Fallback: ToolFallback,
-            },
+            tools: { Fallback: ToolFallback },
           }}
         />
+        <MessageError />
       </div>
 
-      <AssistantActionBar />
-
-      <BranchPicker className="col-start-2 row-start-2 -ml-2 mr-2" />
+      <div className="aui-assistant-message-footer mt-2 ml-2 flex">
+        <BranchPicker />
+        <AssistantActionBar />
+      </div>
     </MessagePrimitive.Root>
   );
 };
@@ -312,7 +248,7 @@ const AssistantActionBar: FC = () => {
       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"
+      className="aui-assistant-action-bar-root -ml-1 col-start-3 row-start-2 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm"
     >
       <ActionBarPrimitive.Copy asChild>
         <TooltipIconButton tooltip="Copy">
@@ -324,15 +260,90 @@ const AssistantActionBar: FC = () => {
           </MessagePrimitive.If>
         </TooltipIconButton>
       </ActionBarPrimitive.Copy>
+      <ActionBarPrimitive.Reload asChild>
+        <TooltipIconButton tooltip="Refresh">
+          <RefreshCwIcon />
+        </TooltipIconButton>
+      </ActionBarPrimitive.Reload>
     </ActionBarPrimitive.Root>
   );
 };
 
-const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({ className, ...rest }) => {
+const UserMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root
+      className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-4 duration-150 ease-out [&:where(>*)]:col-start-2"
+      data-role="user"
+    >
+      <UserMessageAttachments />
+
+      <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
+        <div className="aui-user-message-content wrap-break-word rounded-3xl bg-muted px-5 py-2.5 text-foreground">
+          <MessagePrimitive.Parts />
+        </div>
+        <div className="aui-user-action-bar-wrapper -translate-x-full -translate-y-1/2 absolute top-1/2 left-0 pr-2">
+          <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>
+  );
+};
+
+const EditComposer: FC = () => {
+  return (
+    <MessagePrimitive.Root className="aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 px-2">
+      <ComposerPrimitive.Root className="aui-edit-composer-root ml-auto flex w-full max-w-7/8 flex-col rounded-xl bg-muted">
+        <ComposerPrimitive.Input
+          className="aui-edit-composer-input flex min-h-[60px] w-full resize-none bg-transparent p-4 text-foreground outline-none"
+          autoFocus
+        />
+
+        <div className="aui-edit-composer-footer mx-3 mb-3 flex items-center justify-center gap-2 self-end">
+          <ComposerPrimitive.Cancel asChild>
+            <Button variant="ghost" size="sm" aria-label="Cancel edit">
+              Cancel
+            </Button>
+          </ComposerPrimitive.Cancel>
+          <ComposerPrimitive.Send asChild>
+            <Button size="sm" aria-label="Update message">
+              Update
+            </Button>
+          </ComposerPrimitive.Send>
+        </div>
+      </ComposerPrimitive.Root>
+    </MessagePrimitive.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)}
+      className={cn(
+        "aui-branch-picker-root -ml-2 mr-2 inline-flex items-center text-muted-foreground text-xs",
+        className,
+      )}
       {...rest}
     >
       <BranchPickerPrimitive.Previous asChild>
@@ -340,7 +351,7 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({ className, ...rest
           <ChevronLeftIcon />
         </TooltipIconButton>
       </BranchPickerPrimitive.Previous>
-      <span className="font-medium">
+      <span className="aui-branch-picker-state font-medium">
         <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
       </span>
       <BranchPickerPrimitive.Next asChild>
@@ -351,11 +362,3 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({ className, ...rest
     </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>
-  );
-};