@digithings-ai/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,369 @@
+"use client";
+
+import {
+  ActionBarPrimitive,
+  AuiIf,
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useAuiState,
+  useMessageTiming,
+} from "@assistant-ui/react";
+import {
+  ArrowUpIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  Download,
+  Mic,
+  Moon,
+  MoreHorizontal,
+  Paperclip,
+  PencilIcon,
+  RefreshCwIcon,
+  Square,
+  ThumbsDown,
+  ThumbsUp,
+  XIcon,
+  Zap,
+} from "lucide-react";
+import { useState, type FC } from "react";
+import { useAttachmentSrc } from "../stock/use-attachment-src";
+import { MarkdownText } from "../stock/markdown-text";
+import { MessageExportMenu } from "../stock/message-export-menu";
+import { GrokIcon } from "./grok-icon";
+import { SkinCredit, useComposerCopy } from "../stock";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+
+export const Grok: FC = () => {
+  return (
+    <ThreadPrimitive.Root data-export-thread="" className="flex h-full flex-col items-stretch bg-[#fdfdfd] px-4 dark:bg-[#141414]">
+        <AuiIf condition={(s) => s.thread.isEmpty}>
+          <div className="relative flex h-full flex-col items-center justify-center">
+            <GrokIcon className="mb-6 h-10 text-[#0d0d0d] dark:text-white" />
+            <Composer />
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 px-4 pb-2">
+              <SkinCredit />
+            </div>
+          </div>
+        </AuiIf>
+
+        <AuiIf condition={(s) => s.thread.isEmpty === false}>
+          <ThreadPrimitive.Viewport className="flex grow flex-col overflow-y-scroll pt-16">
+            <ThreadPrimitive.Messages>
+              {() => <ChatMessage />}
+            </ThreadPrimitive.Messages>
+          </ThreadPrimitive.Viewport>
+          <Composer />
+          <SkinCredit />
+        </AuiIf>
+      </ThreadPrimitive.Root>
+  );
+};
+
+const Composer: FC = () => {
+  const isEmpty = useAuiState((s) => s.composer.isEmpty);
+  const isRunning = useAuiState((s) => s.thread.isRunning);
+  const { placeholder } = useComposerCopy(
+    "",
+    "What do you want to know?",
+  );
+
+  return (
+    <ComposerPrimitive.Root data-export-chrome=""
+      className="group/composer mx-auto mb-1.5 w-full max-w-3xl"
+      data-empty={isEmpty}
+      data-running={isRunning}
+    >
+      <div className="overflow-hidden rounded-4xl bg-[#f8f8f8] ring-1 ring-[#e5e5e5] transition-shadow ring-inset focus-within:ring-[#d0d0d0] dark:bg-[#212121] dark:ring-[#2a2a2a] dark:focus-within:ring-[#3a3a3a]">
+        <AuiIf condition={(s) => s.composer.attachments.length > 0}>
+          <div className="flex flex-row flex-wrap gap-2 px-4 pt-3">
+            <ComposerPrimitive.Attachments>
+              {() => <GrokAttachment />}
+            </ComposerPrimitive.Attachments>
+          </div>
+        </AuiIf>
+
+        <div className="flex items-end gap-1 p-2">
+          <ComposerPrimitive.AddAttachment className="mb-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[#0d0d0d] transition-colors hover:bg-[#f0f0f0] dark:text-white dark:hover:bg-[#2a2a2a]">
+            <Paperclip width={18} height={18} />
+          </ComposerPrimitive.AddAttachment>
+
+          <ComposerPrimitive.Input
+            placeholder={placeholder}
+            minRows={1}
+            className="my-2 h-6 max-h-100 min-w-0 flex-1 resize-none bg-transparent text-base leading-6 text-[#0d0d0d] outline-none placeholder:text-[#9a9a9a] dark:text-white dark:placeholder:text-[#6b6b6b]"
+          />
+
+          <GrokModelPicker />
+
+          <div className="relative mb-0.5 h-9 w-9 shrink-0 rounded-full bg-[#0d0d0d] text-white dark:bg-white dark:text-[#0d0d0d]">
+            <button
+              type="button"
+              className="absolute inset-0 flex items-center justify-center transition-all duration-300 ease-out group-data-[empty=false]/composer:scale-0 group-data-[empty=false]/composer:opacity-0 group-data-[running=true]/composer:scale-0 group-data-[running=true]/composer:opacity-0"
+              aria-label="Voice mode"
+            >
+              <Mic width={18} height={18} />
+            </button>
+
+            <ComposerPrimitive.Send className="absolute inset-0 flex items-center justify-center transition-all duration-300 ease-out group-data-[empty=true]/composer:scale-0 group-data-[empty=true]/composer:opacity-0 group-data-[running=true]/composer:scale-0 group-data-[running=true]/composer:opacity-0">
+              <ArrowUpIcon width={18} height={18} />
+            </ComposerPrimitive.Send>
+
+            <ComposerPrimitive.Cancel className="absolute inset-0 flex items-center justify-center transition-all duration-300 ease-out group-data-[running=false]/composer:scale-0 group-data-[running=false]/composer:opacity-0">
+              <Square width={14} height={14} fill="currentColor" />
+            </ComposerPrimitive.Cancel>
+          </div>
+        </div>
+      </div>
+    </ComposerPrimitive.Root>
+  );
+};
+
+const GROK_MODELS = [
+  {
+    id: "grok-4.1-fast",
+    name: "Fast",
+    description: "Default. Quick responses",
+    Icon: Zap,
+  },
+  {
+    id: "grok-4.1",
+    name: "Grok 4.1",
+    description: "Standard reasoning",
+    Icon: Moon,
+  },
+  {
+    id: "grok-4.1-think",
+    name: "Think",
+    description: "Multi-step reasoning",
+    Icon: Moon,
+  },
+];
+
+const GrokModelPicker: FC = () => {
+  const [model, setModel] = useState(GROK_MODELS[0]!.id);
+  const current = GROK_MODELS.find((m) => m.id === model) ?? GROK_MODELS[0]!;
+  const CurrentIcon = current.Icon;
+
+  return (
+    <div data-deploy-model-picker className="contents">
+    <DropdownMenu>
+      <DropdownMenuTrigger className="mb-0.5 flex h-9 shrink-0 items-center gap-2 rounded-full px-2.5 text-[#0d0d0d] hover:bg-[#f0f0f0] dark:text-white dark:hover:bg-[#2a2a2a]">
+        <CurrentIcon width={18} height={18} className="shrink-0" />
+        <div className="flex items-center gap-1 overflow-hidden transition-[max-width,opacity] duration-300 group-data-[empty=false]/composer:max-w-0 group-data-[empty=false]/composer:opacity-0 group-data-[empty=true]/composer:max-w-32 group-data-[empty=true]/composer:opacity-100">
+          <span className="text-sm font-semibold whitespace-nowrap">
+            {current.name}
+          </span>
+          <ChevronDownIcon width={16} height={16} className="shrink-0" />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-60">
+        {GROK_MODELS.map(({ id, name, description, Icon }) => (
+          <DropdownMenuItem
+            key={id}
+            onClick={() => setModel(id)}
+            className="flex items-start gap-3"
+          >
+            <span className="mt-0.5 flex size-4 items-center justify-center text-[#0d0d0d] dark:text-white">
+              {id === model ? <CheckIcon /> : <Icon width={14} height={14} />}
+            </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>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="text-muted-foreground text-sm">
+          Subscribe to SuperGrok
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    </div>
+  );
+};
+
+const ChatMessage: FC = () => {
+  const role = useAuiState((s) => s.message.role);
+  return (
+    <MessagePrimitive.Root data-role={role} className="group/message relative mx-auto mb-2 flex w-full max-w-3xl flex-col pb-0.5">
+      <AuiIf condition={(s) => s.message.role === "user"}>
+        <div className="flex flex-col items-end">
+          <div className="relative max-w-[90%] rounded-3xl rounded-br-lg border border-[#e5e5e5] bg-[#f0f0f0] px-4 py-3 text-[#0d0d0d] dark:border-[#2a2a2a] dark:bg-[#1a1a1a] dark:text-white">
+            <div className="prose prose-sm dark:prose-invert prose-p:my-0 wrap-break-word">
+              <MessagePrimitive.Parts>
+                {({ part }) => {
+                  if (part.type === "text") return <MarkdownText />;
+                  return null;
+                }}
+              </MessagePrimitive.Parts>
+            </div>
+          </div>
+          <div className="mt-1 flex h-8 items-center justify-end gap-0.5 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100">
+            <ActionBarPrimitive.Root data-export-chrome="" className="flex items-center gap-0.5">
+              <ActionBarPrimitive.Edit className="flex h-8 w-8 items-center justify-center rounded-full text-[#6b6b6b] transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white">
+                <PencilIcon width={16} height={16} />
+              </ActionBarPrimitive.Edit>
+              <ActionBarPrimitive.Copy className="flex h-8 w-8 items-center justify-center rounded-full text-[#6b6b6b] transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white">
+                <CopyIcon width={16} height={16} />
+              </ActionBarPrimitive.Copy>
+            </ActionBarPrimitive.Root>
+          </div>
+        </div>
+      </AuiIf>
+
+      <AuiIf condition={(s) => s.message.role === "assistant"}>
+        <div className="flex flex-col items-start">
+          <div className="w-full max-w-none">
+            <div className="prose prose-sm dark:prose-invert prose-li:my-1 prose-ol:my-1 prose-p:my-2 prose-ul:my-1 wrap-break-word text-[#0d0d0d] dark:text-[#e5e5e5]">
+              <MessagePrimitive.Parts>
+                {({ part }) => {
+                  if (part.type === "text") return <MarkdownText />;
+                  return null;
+                }}
+              </MessagePrimitive.Parts>
+            </div>
+          </div>
+          <div className="mt-1 flex h-8 w-full items-center justify-start gap-0.5 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100">
+            <ActionBarPrimitive.Root data-export-chrome="" className="-ml-2 flex items-center gap-0.5">
+              <ActionBarPrimitive.Reload className="flex h-8 w-8 items-center justify-center rounded-full text-[#6b6b6b] transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white">
+                <RefreshCwIcon width={16} height={16} />
+              </ActionBarPrimitive.Reload>
+              <ActionBarPrimitive.Copy className="flex h-8 w-8 items-center justify-center rounded-full text-[#6b6b6b] transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white">
+                <CopyIcon width={16} height={16} />
+              </ActionBarPrimitive.Copy>
+              <ActionBarPrimitive.FeedbackPositive className="flex h-8 w-8 items-center justify-center rounded-full text-[#6b6b6b] transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white">
+                <ThumbsUp width={16} height={16} />
+              </ActionBarPrimitive.FeedbackPositive>
+              <ActionBarPrimitive.FeedbackNegative className="flex h-8 w-8 items-center justify-center rounded-full text-[#6b6b6b] transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white">
+                <ThumbsDown width={16} height={16} />
+              </ActionBarPrimitive.FeedbackNegative>
+              <MessageExportMenu
+                trigger={
+                  <button type="button" aria-label="More" className={"flex h-8 w-8 items-center justify-center rounded-full text-[#6b6b6b] transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white"}>
+                    <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"
+              />
+              <MessageTimingDisplay />
+            </ActionBarPrimitive.Root>
+          </div>
+        </div>
+      </AuiIf>
+    </MessagePrimitive.Root>
+  );
+};
+
+const formatTime = (ms: number | undefined) => {
+  if (ms === undefined) return null;
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+};
+
+const formatMs = (ms: number | undefined) => {
+  if (ms === undefined) return "\u2014";
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+};
+
+const MessageTimingDisplay: FC = () => {
+  const timing = useMessageTiming();
+  if (!timing?.totalStreamTime) return null;
+
+  const totalTimeText = formatTime(timing.totalStreamTime);
+  if (!totalTimeText) return null;
+
+  return (
+    <div className="group/timing relative">
+      <button
+        type="button"
+        className="ml-1 flex h-auto items-center justify-center rounded-md px-1.5 py-0.5 font-mono text-xs text-[#6b6b6b] tabular-nums transition-colors hover:bg-[#e5e5e5] hover:text-[#0d0d0d] dark:text-[#9a9a9a] dark:hover:bg-[#2a2a2a] dark:hover:text-white"
+      >
+        {totalTimeText}
+      </button>
+      <div className="pointer-events-none absolute top-1/2 left-full z-10 ml-2 -translate-y-1/2 scale-95 rounded-lg border border-[#e5e5e5] bg-white px-3 py-2 opacity-0 transition-all group-hover/timing:pointer-events-auto group-hover/timing:scale-100 group-hover/timing:opacity-100 before:absolute before:top-0 before:-left-2 before:h-full before:w-2 before:content-[''] dark:border-[#2a2a2a] dark:bg-[#1a1a1a]">
+        <div className="grid min-w-[140px] gap-1.5 text-xs">
+          {timing.firstTokenTime !== undefined && (
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[#6b6b6b] dark:text-[#9a9a9a]">
+                First token
+              </span>
+              <span className="font-mono text-[#0d0d0d] tabular-nums dark:text-white">
+                {formatMs(timing.firstTokenTime)}
+              </span>
+            </div>
+          )}
+          <div className="flex items-center justify-between gap-4">
+            <span className="text-[#6b6b6b] dark:text-[#9a9a9a]">Total</span>
+            <span className="font-mono text-[#0d0d0d] tabular-nums dark:text-white">
+              {formatMs(timing.totalStreamTime)}
+            </span>
+          </div>
+          {timing.tokensPerSecond !== undefined && (
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[#6b6b6b] dark:text-[#9a9a9a]">Speed</span>
+              <span className="font-mono text-[#0d0d0d] tabular-nums dark:text-white">
+                {timing.tokensPerSecond.toFixed(1)} tok/s
+              </span>
+            </div>
+          )}
+          {timing.totalChunks > 0 && (
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[#6b6b6b] dark:text-[#9a9a9a]">Chunks</span>
+              <span className="font-mono text-[#0d0d0d] tabular-nums dark:text-white">
+                {timing.totalChunks}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const GrokAttachment: FC = () => {
+  const src = useAttachmentSrc();
+
+  return (
+    <AttachmentPrimitive.Root className="group/attachment relative">
+      <div className="flex h-12 items-center gap-2 overflow-hidden rounded-xl border border-[#e5e5e5] bg-[#f0f0f0] p-0.5 transition-colors hover:border-[#d0d0d0] dark:border-[#2a2a2a] dark:bg-[#252525] dark:hover:border-[#3a3a3a]">
+        <AuiIf condition={(s) => s.attachment.type === "image"}>
+          {src ? (
+            <img
+              className="h-full w-12 rounded-[9px] object-cover"
+              alt="Attachment"
+              src={src}
+            />
+          ) : (
+            <div className="flex h-full w-12 items-center justify-center rounded-[9px] bg-[#e5e5e5] text-[#6b6b6b] dark:bg-[#3a3a3a] dark:text-[#9a9a9a]">
+              <AttachmentPrimitive.unstable_Thumb className="text-xs" />
+            </div>
+          )}
+        </AuiIf>
+        <AuiIf condition={(s) => s.attachment.type !== "image"}>
+          <div className="flex h-full w-12 items-center justify-center rounded-[9px] bg-[#e5e5e5] text-[#6b6b6b] dark:bg-[#3a3a3a] dark:text-[#9a9a9a]">
+            <AttachmentPrimitive.unstable_Thumb className="text-xs" />
+          </div>
+        </AuiIf>
+      </div>
+      <AttachmentPrimitive.Remove className="absolute -top-1.5 -right-1.5 flex h-6 w-6 scale-50 items-center justify-center rounded-full border border-[#e5e5e5] bg-white text-[#6b6b6b] opacity-0 transition-all group-hover/attachment:scale-100 group-hover/attachment:opacity-100 hover:bg-[#f5f5f5] hover:text-[#0d0d0d] dark:border-[#3a3a3a] dark:bg-[#1a1a1a] dark:text-[#9a9a9a] dark:hover:bg-[#252525] dark:hover:text-white">
+        <XIcon width={14} height={14} />
+      </AttachmentPrimitive.Remove>
+    </AttachmentPrimitive.Root>
+  );
+};

package/src/components/chat/skins/index.ts

@@ -0,0 +1,46 @@
+/**
+ * Skin registry + host contract + ThreadSkinView dispatch (WS4). The 12
+ * skins live here; hosts mount them via ThreadSkinView and provide
+ * first-party wiring through the `digichat` prop (see DigichatSkinOptions).
+ */
+export { ThreadSkinView, type ThreadSkinViewProps } from "./thread-skin-view";
+// NOTE: DigichatSkin (the component value) is intentionally NOT re-exported
+// here — its stylesheet side-effect imports would force the chunk into every
+// barrel importer's graph and defeat the per-skin lazy split (WS4 Step 5).
+// Import it via the deep export `@digithings-ai/ui/chat/skins/digichat` instead.
+export {
+  type DigichatSkinCopy,
+  type DigichatSkinOptions,
+  type DigichatSkinSlash,
+  type SkinSlashAction,
+  type SkinSlashAdapterLike,
+  type SkinSlashCommand,
+  type SkinSlashExtraDef,
+} from "./digichat";
+export {
+  CLONE_SKINS,
+  DEFAULT_THREAD_SKIN,
+  FIRST_PARTY_DEFAULT_SKIN_HOSTS,
+  FIRST_PARTY_DEFAULT_SKIN_SLUGS,
+  FRAMED_CHROME_MODES,
+  LAYOUT_SKINS,
+  THREAD_SKINS,
+  defaultThreadSkinForTenant,
+  isCloneSkin,
+  isFramedPresentation,
+  isThreadSkin,
+  parseThreadSkin,
+
+  skinOwnsPageChrome,
+  skinShowsSiteRails,
+  SITE_RAILS_SKINS,
+  threadSkinChoices,
+  type CloneSkin,
+  type FramedChromeMode,
+  type LayoutSkin,
+  type ThreadSkin,
+} from "./thread-skins";
+export {
+  DIGICHAT_SKIN_HOST_CONTRACT,
+  type SkinHostContract,
+} from "./thread-skin-host-contract";