@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/perplexity.tsx

@@ -0,0 +1,462 @@
+"use client";
+
+import { cn } from "../../../lib/utils";
+import { MarkdownText } from "../stock/markdown-text";
+import { MessageExportMenu } from "../stock/message-export-menu";
+import { SkinCredit, useSkinChrome } from "../stock";
+import {
+  ActionBarPrimitive,
+  AuiIf,
+  AttachmentPrimitive,
+  BranchPickerPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useAuiState,
+} from "@assistant-ui/react";
+import {
+  ArrowRight,
+  AudioLines,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  Download,
+  FileIcon,
+  MoreHorizontal,
+  PencilIcon,
+  Plus,
+  RefreshCwIcon,
+  Search,
+  Sparkles,
+  Square,
+  Telescope,
+  XIcon,
+} from "lucide-react";
+import { type FC, useState } from "react";
+import { useAttachmentSrc } from "../stock/use-attachment-src";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+
+const composerPrimaryActionClassName =
+  "absolute inset-0 flex items-center justify-center rounded-full transition-all duration-200 ease-out";
+
+const composerPrimaryActionColorsClassName =
+  "bg-[#25211c] text-[#f8f5f0] hover:bg-[#171411] dark:bg-[#f5f2ed] dark:text-[#1b1713] dark:hover:bg-white";
+
+const messageActionClassName =
+  "flex size-8 items-center justify-center rounded-full text-[#7a7268] transition-colors hover:bg-[#f1ece5] hover:text-[#1f1b17] dark:text-[#9d968d] dark:hover:bg-[#2a2724] dark:hover:text-[#f5f2ed]";
+
+export const Perplexity: FC = () => {
+  const chrome = useSkinChrome();
+  const emptyPlaceholder = chrome.placeholder?.trim() || "Ask anything...";
+  const followPlaceholder = chrome.placeholder?.trim() || "Ask a follow-up...";
+  return (
+    <ThreadPrimitive.Root data-export-thread=""
+        className="flex h-full flex-col bg-[#f6f2ec] text-[#1f1b17] dark:bg-[#171615] dark:text-[#f5f2ed]"
+        style={{
+          ["--thread-max-width" as string]: "40rem",
+        }}
+      >
+        <AuiIf condition={(s) => s.thread.isEmpty}>
+          <EmptyState placeholder={emptyPlaceholder} />
+        </AuiIf>
+
+        <AuiIf condition={(s) => !s.thread.isEmpty}>
+          <ThreadPrimitive.Viewport className="flex grow flex-col overflow-y-auto px-4 pt-12">
+            <ThreadPrimitive.Messages>
+              {() => <ChatMessage />}
+            </ThreadPrimitive.Messages>
+
+            <ThreadPrimitive.ViewportFooter className="sticky bottom-0 mx-auto mt-auto w-full max-w-(--thread-max-width) bg-linear-to-b from-transparent via-[#f6f2ec]/85 to-[#f6f2ec] pt-6 pb-2 dark:via-[#171615]/85 dark:to-[#171615]">
+              <Composer placeholder={followPlaceholder} />
+              <SkinCredit />
+            </ThreadPrimitive.ViewportFooter>
+          </ThreadPrimitive.Viewport>
+        </AuiIf>
+      </ThreadPrimitive.Root>
+  );
+};
+
+const EmptyState: FC<{ placeholder: string }> = ({ placeholder }) => {
+  return (
+    <div className="relative flex h-full flex-col justify-center px-4">
+      <div className="mx-auto w-full max-w-(--thread-max-width)">
+        <p className="font-display mb-8 text-center text-5xl leading-none tracking-[-0.06em] text-[#25211c] sm:text-[3.1rem] dark:text-[#f5f2ed]">
+          perplexity
+        </p>
+        <Composer placeholder={placeholder} />
+      </div>
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 px-4 pb-2">
+        <SkinCredit />
+      </div>
+    </div>
+  );
+};
+
+const Composer: FC<{ placeholder: string }> = ({ placeholder }) => {
+  return (
+    <ComposerPrimitive.Root data-export-chrome="" className="group/composer mx-auto flex w-full max-w-(--thread-max-width) flex-col rounded-3xl border border-[#d7d0c5] bg-[#fcfbf8] transition-colors focus-within:border-[#b8b0a5] dark:border-[#4a433b] dark:bg-[#23211f] dark:focus-within:border-[#6a6258]">
+      <AuiIf condition={(s) => s.composer.attachments.length > 0}>
+        <div className="flex flex-wrap gap-2 px-4 pt-4">
+          <ComposerPrimitive.Attachments>
+            {() => <AttachmentPreview removable />}
+          </ComposerPrimitive.Attachments>
+        </div>
+      </AuiIf>
+
+      <ComposerPrimitive.Input
+        rows={2}
+        placeholder={placeholder}
+        className="min-h-20 w-full resize-none bg-transparent px-5 pt-4 pb-0 text-[1.05rem] leading-7 outline-none placeholder:text-[#8a8176] dark:placeholder:text-[#918a82]"
+      />
+
+      <div className="flex items-center justify-between gap-2 px-3 pt-0.5 pb-3">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <ComposerPrimitive.AddAttachment asChild>
+            <button
+              type="button"
+              className="flex size-9 shrink-0 items-center justify-center rounded-full text-[#6f675d] transition-colors hover:bg-[#f2ede6] hover:text-[#1f1b17] dark:text-[#a39c93] dark:hover:bg-[#2b2825] dark:hover:text-[#f5f2ed]"
+              aria-label="Add attachment"
+            >
+              <Plus className="size-4.5" />
+            </button>
+          </ComposerPrimitive.AddAttachment>
+          <SearchModePicker />
+        </div>
+
+        <div className="flex items-center gap-1">
+          <ModelPicker />
+          <ComposerPrimaryAction />
+        </div>
+      </div>
+    </ComposerPrimitive.Root>
+  );
+};
+
+const ComposerPrimaryAction: FC = () => {
+  return (
+    <div className="relative size-10 shrink-0">
+      <AuiIf condition={(s) => s.thread.isRunning}>
+        <ComposerPrimitive.Cancel
+          className={cn(
+            composerPrimaryActionClassName,
+            composerPrimaryActionColorsClassName,
+          )}
+        >
+          <Square className="size-3.5 fill-current" />
+        </ComposerPrimitive.Cancel>
+      </AuiIf>
+
+      <AuiIf
+        condition={(s) => !s.thread.isRunning && s.composer.dictation != null}
+      >
+        <ComposerPrimitive.StopDictation
+          className={cn(
+            composerPrimaryActionClassName,
+            composerPrimaryActionColorsClassName,
+          )}
+        >
+          <Square className="size-3.5 animate-pulse fill-current" />
+        </ComposerPrimitive.StopDictation>
+      </AuiIf>
+
+      <AuiIf
+        condition={(s) =>
+          !s.thread.isRunning &&
+          s.composer.dictation == null &&
+          !s.composer.isEmpty
+        }
+      >
+        <ComposerPrimitive.Send
+          className={cn(
+            composerPrimaryActionClassName,
+            composerPrimaryActionColorsClassName,
+          )}
+        >
+          <ArrowRight className="size-5" />
+        </ComposerPrimitive.Send>
+      </AuiIf>
+
+      <AuiIf
+        condition={(s) =>
+          !s.thread.isRunning &&
+          s.composer.dictation == null &&
+          s.composer.isEmpty
+        }
+      >
+        <ComposerPrimitive.Dictate
+          className={cn(
+            composerPrimaryActionClassName,
+            composerPrimaryActionColorsClassName,
+          )}
+        >
+          <AudioLines className="size-5" />
+        </ComposerPrimitive.Dictate>
+      </AuiIf>
+    </div>
+  );
+};
+
+const SEARCH_MODES = [
+  {
+    id: "search",
+    name: "Search",
+    description: "Fast answers to everyday questions",
+    Icon: Search,
+  },
+  {
+    id: "research",
+    name: "Research",
+    description: "In-depth reports on complex topics",
+    Icon: Telescope,
+  },
+  {
+    id: "labs",
+    name: "Labs",
+    description: "Apps, slides, and dashboards",
+    Icon: Sparkles,
+  },
+];
+
+const SearchModePicker: FC = () => {
+  const [mode, setMode] = useState(SEARCH_MODES[0]!.id);
+  const current = SEARCH_MODES.find((m) => m.id === mode) ?? SEARCH_MODES[0]!;
+  const CurrentIcon = current.Icon;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="flex h-8 items-center gap-1.5 rounded-full border border-[#e0d8cb] bg-[#f5f1eb] px-3 text-sm text-[#3a342d] transition-colors hover:bg-[#ede6dd] dark:border-[#3a342f] dark:bg-[#2a2724] dark:text-[#e6dfd5] dark:hover:bg-[#332f2c]">
+        <CurrentIcon className="size-3.5" />
+        <span>{current.name}</span>
+        <ChevronDownIcon className="size-3.5 opacity-70" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-64">
+        {SEARCH_MODES.map(({ id, name, description, Icon }) => (
+          <DropdownMenuItem
+            key={id}
+            onClick={() => setMode(id)}
+            className="flex items-start gap-3"
+          >
+            <span className="mt-0.5 flex size-4 items-center justify-center text-[#1f1b17] dark:text-[#f5f2ed]">
+              {id === mode ? <CheckIcon /> : <Icon className="size-3.5" />}
+            </span>
+            <span className="flex flex-1 flex-col">
+              <span className="text-foreground text-sm">{name}</span>
+              <span className="text-muted-foreground text-xs">
+                {description}
+              </span>
+            </span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const PERPLEXITY_MODELS = [
+  { id: "best", name: "Best", description: "Auto-pick the best model" },
+  { id: "sonar", name: "Sonar", description: "Perplexity's fast model" },
+  { id: "claude", name: "Claude 4.5 Sonnet", description: "Anthropic" },
+  { id: "gpt-5", name: "GPT-5", description: "OpenAI" },
+  { id: "gemini", name: "Gemini 3 Pro", description: "Google" },
+];
+
+const ModelPicker: FC = () => {
+  const [model, setModel] = useState(PERPLEXITY_MODELS[0]!.id);
+  const current =
+    PERPLEXITY_MODELS.find((m) => m.id === model) ?? PERPLEXITY_MODELS[0]!;
+
+  return (
+    <div data-deploy-model-picker className="contents">
+    <DropdownMenu>
+      <DropdownMenuTrigger className="hidden h-8 items-center gap-1 rounded-full px-2.5 text-sm text-[#746c62] transition-colors hover:bg-[#f2ede6] hover:text-[#1f1b17] sm:flex dark:text-[#a19a91] dark:hover:bg-[#2b2825] dark:hover:text-[#f5f2ed]">
+        <span>{current.name}</span>
+        <ChevronDownIcon className="size-4 opacity-70" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-60">
+        {PERPLEXITY_MODELS.map((m) => (
+          <DropdownMenuItem
+            key={m.id}
+            onClick={() => setModel(m.id)}
+            className="flex items-start gap-3"
+          >
+            <span className="mt-0.5 flex size-4 items-center justify-center text-[#1f1b17] dark:text-[#f5f2ed]">
+              {m.id === model ? <CheckIcon /> : null}
+            </span>
+            <span className="flex flex-1 flex-col">
+              <span className="text-foreground text-sm">{m.name}</span>
+              <span className="text-muted-foreground text-xs">
+                {m.description}
+              </span>
+            </span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+    </div>
+  );
+};
+
+const ChatMessage: FC = () => {
+  const role = useAuiState((s) => s.message.role);
+  return (
+    <MessagePrimitive.Root data-role={role} className="group/message mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-2 py-4">
+      <AuiIf condition={(s) => s.message.role === "user"}>
+        <div className="flex flex-col items-end gap-2">
+          <div className="flex max-w-full flex-wrap justify-end gap-2">
+            <MessagePrimitive.Attachments>
+              {() => <AttachmentPreview removable={false} />}
+            </MessagePrimitive.Attachments>
+          </div>
+
+          <div className="flex items-start gap-2">
+            <ActionBarPrimitive.Root data-export-chrome="" className="mt-1 flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100">
+              <ActionBarPrimitive.Copy className={messageActionClassName}>
+                <CopyIcon className="size-4" />
+              </ActionBarPrimitive.Copy>
+              <ActionBarPrimitive.Edit className={messageActionClassName}>
+                <PencilIcon className="size-4" />
+              </ActionBarPrimitive.Edit>
+            </ActionBarPrimitive.Root>
+
+            <div className="max-w-[85%] rounded-3xl rounded-tr-md border border-[#ddd5c9] bg-[#fcfbf8] px-4 py-3 text-[#2c2721] dark:border-[#38332e] dark:bg-[#23211f] dark:text-[#f1ede7]">
+              <div className="prose prose-sm dark:prose-invert prose-p:my-0 wrap-break-word">
+                <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
+              </div>
+            </div>
+          </div>
+
+          <BranchPicker className="mr-3" />
+        </div>
+      </AuiIf>
+
+      <AuiIf condition={(s) => s.message.role === "assistant"}>
+        <div className="flex items-start gap-3">
+          <div className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-full border border-[#ddd5c9] bg-[#fffdfa] text-[#5b534a] dark:border-[#38332e] dark:bg-[#23211f] dark:text-[#d9d2c8]">
+            <Search className="size-4" />
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="prose prose-sm dark:prose-invert prose-li:my-1 prose-p:my-2 prose-ul:my-2 wrap-break-word text-[#2c2721] dark:text-[#ece7df]">
+              <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
+            </div>
+
+            <div className="mt-2 flex items-center gap-2">
+              <BranchPicker />
+              <ActionBarPrimitive.Root data-export-chrome="" className="flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100">
+                <ActionBarPrimitive.Reload className={messageActionClassName}>
+                  <RefreshCwIcon className="size-4" />
+                </ActionBarPrimitive.Reload>
+                <ActionBarPrimitive.Copy className={messageActionClassName}>
+                  <AuiIf condition={(s) => s.message.isCopied}>
+                    <CheckIcon className="size-4" />
+                  </AuiIf>
+                  <AuiIf condition={(s) => !s.message.isCopied}>
+                    <CopyIcon className="size-4" />
+                  </AuiIf>
+                </ActionBarPrimitive.Copy>
+                <MessageExportMenu
+                  trigger={
+                    <button type="button" aria-label="More" className={messageActionClassName}>
+                      <MoreHorizontal width={16} height={16} />
+                    </button>
+                  }
+                  icon={<Download className="size-4" />}
+                  align="start"
+                  contentClassName="bg-popover text-popover-foreground data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out z-50 min-w-40 overflow-hidden rounded-xl border p-1.5 shadow-md"
+                  itemClassName="text-muted-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm outline-none select-none"
+                />
+              </ActionBarPrimitive.Root>
+            </div>
+          </div>
+        </div>
+      </AuiIf>
+    </MessagePrimitive.Root>
+  );
+};
+
+const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
+  className,
+  ...props
+}) => {
+  return (
+    <BranchPickerPrimitive.Root data-export-chrome=""
+      hideWhenSingleBranch
+      className={cn(
+        "inline-flex items-center gap-1 text-xs text-[#8a8176] dark:text-[#9f978e]",
+        className,
+      )}
+      {...props}
+    >
+      <BranchPickerPrimitive.Previous className={messageActionClassName}>
+        <ChevronLeftIcon className="size-4" />
+      </BranchPickerPrimitive.Previous>
+      <span className="min-w-9 text-center">
+        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+      </span>
+      <BranchPickerPrimitive.Next className={messageActionClassName}>
+        <ChevronRightIcon className="size-4" />
+      </BranchPickerPrimitive.Next>
+    </BranchPickerPrimitive.Root>
+  );
+};
+
+const AttachmentTypeLabel: FC = () => {
+  const typeLabel = useAuiState((s) => {
+    switch (s.attachment.type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        return s.attachment.type;
+    }
+  });
+
+  return <span>{typeLabel}</span>;
+};
+
+const AttachmentPreview: FC<{ removable: boolean }> = ({ removable }) => {
+  const src = useAttachmentSrc();
+
+  return (
+    <AttachmentPrimitive.Root className="group/attachment relative">
+      <div className="flex max-w-65 items-center gap-3 rounded-2xl border border-[#e3dbcf] bg-[#f5f1eb] py-2 pr-3 pl-2 transition-colors hover:bg-[#efe8de] dark:border-[#3a342f] dark:bg-[#2a2724] dark:hover:bg-[#302c29]">
+        <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-[#fffdfa] text-[#6f675d] dark:bg-[#201d1b] dark:text-[#a59f96]">
+          {src ? (
+            <img
+              src={src}
+              alt="Attachment"
+              className="size-full object-cover"
+            />
+          ) : (
+            <FileIcon className="size-4" />
+          )}
+        </div>
+        <div className="min-w-0">
+          <p className="truncate text-sm leading-5 text-[#2d2822] dark:text-[#f3efe9]">
+            <AttachmentPrimitive.Name />
+          </p>
+          <p className="text-xs text-[#7d7469] dark:text-[#9d968d]">
+            <AttachmentTypeLabel />
+          </p>
+        </div>
+      </div>
+
+      {removable ? (
+        <AttachmentPrimitive.Remove className="absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full bg-[#ede6dd] text-[#5f574d] opacity-0 transition-all group-hover/attachment:opacity-100 hover:bg-[#dfd5c8] dark:bg-[#3a342f] dark:text-[#d4ccc2] dark:hover:bg-[#4a433b]">
+          <XIcon className="size-3.5" />
+        </AttachmentPrimitive.Remove>
+      ) : null}
+    </AttachmentPrimitive.Root>
+  );
+};

package/src/components/chat/skins/product-page-assistant/assistant-modal.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { AssistantModalPrimitive } from "@assistant-ui/react";
+import { ChevronDownIcon, LifeBuoyIcon } from "lucide-react";
+import { type FC, forwardRef, type ReactNode } from "react";
+
+import { TooltipIconButton } from "../tooltip-icon-button";
+
+type AssistantModalProps = {
+  triggerLabel: string;
+  closeLabel: string;
+  defaultOpen?: boolean;
+  children: ReactNode;
+};
+
+export const AssistantModal: FC<AssistantModalProps> = ({
+  triggerLabel,
+  closeLabel,
+  defaultOpen = false,
+  children,
+}) => {
+  return (
+    <AssistantModalPrimitive.Root defaultOpen={defaultOpen} unstable_openOnRunStart>
+      <AssistantModalPrimitive.Anchor className="aui-root aui-modal-anchor fixed end-4 bottom-4 z-40 size-12">
+        <AssistantModalPrimitive.Trigger asChild>
+          <AssistantModalButton triggerLabel={triggerLabel} closeLabel={closeLabel} />
+        </AssistantModalPrimitive.Trigger>
+      </AssistantModalPrimitive.Anchor>
+      <AssistantModalPrimitive.Content
+        sideOffset={16}
+        className="aui-root aui-modal-content data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=closed]:slide-out-to-right-1/2 data-[state=closed]:zoom-out data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-1/2 data-[state=open]:slide-in-from-right-1/2 data-[state=open]:zoom-in bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in z-50 h-[min(720px,calc(100dvh-5rem))] w-[min(440px,calc(100vw-2rem))] overflow-clip overscroll-contain rounded-lg border border-slate-200 p-0 shadow-xl outline-none [&>.aui-thread-root]:bg-inherit [&>.aui-thread-root_.aui-thread-viewport-footer]:bg-inherit"
+      >
+        {children}
+      </AssistantModalPrimitive.Content>
+    </AssistantModalPrimitive.Root>
+  );
+};
+
+type AssistantModalButtonProps = {
+  "data-state"?: "open" | "closed";
+  triggerLabel: string;
+  closeLabel: string;
+};
+
+const AssistantModalButton = forwardRef<HTMLButtonElement, AssistantModalButtonProps>(
+  ({ "data-state": state, triggerLabel, closeLabel, ...rest }, ref) => {
+    const tooltip = state === "open" ? closeLabel : triggerLabel;
+
+    return (
+      <TooltipIconButton
+        variant="default"
+        tooltip={tooltip}
+        side="left"
+        {...rest}
+        className="aui-modal-button size-full rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105 hover:bg-primary/90 active:scale-95"
+        ref={ref}
+      >
+        <LifeBuoyIcon
+          data-state={state}
+          className="aui-modal-button-closed-icon absolute size-6 transition-all data-[state=closed]:scale-100 data-[state=closed]:rotate-0 data-[state=open]:scale-0 data-[state=open]:rotate-90"
+        />
+
+        <ChevronDownIcon
+          data-state={state}
+          className="aui-modal-button-open-icon absolute size-6 transition-all data-[state=closed]:scale-0 data-[state=closed]:-rotate-90 data-[state=open]:scale-100 data-[state=open]:rotate-0"
+        />
+        <span className="aui-sr-only sr-only">{tooltip}</span>
+      </TooltipIconButton>
+    );
+  },
+);
+
+AssistantModalButton.displayName = "AssistantModalButton";

package/src/components/chat/skins/product-page-assistant/index.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Thread } from "../../stock/thread.aui";
+import { AssistantModal } from "./assistant-modal";
+import { ProductDashboard } from "./product-dashboard";
+import { useComposerCopy } from "../../stock";
+
+export function ProductPageAssistant() {
+  const { title } = useComposerCopy("How can I help?", "Describe the issue");
+  const trigger = title ? `Open ${title}` : "Open support";
+  return (
+    <div className="relative h-full">
+      <ProductDashboard />
+      <AssistantModal triggerLabel={trigger} closeLabel="Close support" defaultOpen>
+        <Thread />
+      </AssistantModal>
+    </div>
+  );
+}