@digithings-ai/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,322 @@
+"use client";
+
+import {
+  ActionBarPrimitive,
+  AttachmentPrimitive,
+  AuiIf,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+  useAuiState,
+} from "@assistant-ui/react";
+import {
+  ArrowUpIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  Download,
+  EllipsisVertical,
+  ImageIcon,
+  Lightbulb,
+  Mic,
+  Paperclip,
+  PencilIcon,
+  PencilRuler,
+  PlusIcon,
+  RefreshCwIcon,
+  Telescope,
+  ThumbsDown,
+  ThumbsUp,
+  XIcon,
+} from "lucide-react";
+import { type FC, useState } from "react";
+import { useAttachmentSrc } from "../stock/use-attachment-src";
+import { MarkdownText } from "../stock/markdown-text";
+import { MessageExportMenu } from "../stock/message-export-menu";
+import { SkinCredit, useComposerCopy } from "../stock";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+
+export const Gemini: FC = () => {
+  const { welcome } = useComposerCopy(
+    "How can I help you today?",
+    "Ask Gemini",
+  );
+  return (
+    <ThreadPrimitive.Root data-export-thread="" className="flex h-full flex-col overflow-hidden bg-[#fdfcfc] text-[#1f1f1f] dark:bg-[#0c0c0c] dark:text-[#e3e3e3]">
+        <AuiIf condition={(s) => s.thread.messages.length === 0}>
+          <div className="relative flex grow flex-col">
+            <div className="flex grow flex-col items-center justify-center px-4">
+              <div className="flex w-full max-w-3xl flex-col">
+                <h1 className="fade-in slide-in-from-bottom-3 motion-safe:animate-in fill-mode-both relative z-10 mb-6 text-center text-4xl font-normal text-[#1f1f1f] delay-500 duration-400 ease-[cubic-bezier(0.22,1,0.36,1)] dark:text-white">
+                  {welcome}
+                </h1>
+                <div className="relative">
+                  <div
+                    aria-hidden="true"
+                    className="fade-in zoom-in-40 blur-in-[90px] motion-safe:animate-in fill-mode-both pointer-events-none absolute top-1/2 left-1/2 h-[260px] w-[680px] max-w-[92%] -translate-x-1/2 -translate-y-1/2 rounded-[140px] bg-[#a9d1fb]/60 blur-[90px] duration-1000 ease-[cubic-bezier(0.22,1,0.36,1)] dark:bg-[#1b2f9c]/50"
+                  />
+                  <div className="relative z-10">
+                    <Composer />
+      
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 px-4 pb-1.5">
+              <SkinCredit />
+            </div>
+          </div>
+        </AuiIf>
+
+        <AuiIf condition={(s) => s.thread.messages.length > 0}>
+          <ThreadPrimitive.Viewport className="flex grow flex-col overflow-y-scroll pt-12">
+            <ThreadPrimitive.Messages components={{ Message: ChatMessage }} />
+            <ThreadPrimitive.ViewportFooter className="sticky bottom-0 mt-auto flex w-full flex-col items-center gap-1.5 bg-[#fdfcfc] px-4 pb-1.5 dark:bg-[#0c0c0c]">
+              <Composer />
+              <SkinCredit />
+            </ThreadPrimitive.ViewportFooter>
+          </ThreadPrimitive.Viewport>
+        </AuiIf>
+      </ThreadPrimitive.Root>
+  );
+};
+
+const ghostBtnClass =
+  "flex shrink-0 items-center justify-center rounded-full text-[#444746] transition-colors hover:bg-[#444746]/8 hover:text-[#1f1f1f] dark:text-[#c4c7c5] dark:hover:bg-[#c4c7c5]/10 dark:hover:text-[#e3e3e3]";
+
+const Composer: FC = () => {
+  const { placeholder } = useComposerCopy(
+    "How can I help you today?",
+    "Ask Gemini",
+  );
+  return (
+    <ComposerPrimitive.Root data-export-chrome="" className="mx-auto flex w-full max-w-2xl flex-col rounded-4xl bg-white p-3 dark:bg-[#1e1f20]">
+      <AuiIf condition={(s) => s.composer.attachments.length > 0}>
+        <div className="flex flex-row gap-2.5 overflow-x-auto px-1 pt-1 pb-2.5">
+          <ComposerPrimitive.Attachments
+            components={{ Attachment: GeminiAttachment }}
+          />
+        </div>
+      </AuiIf>
+
+      <div className="flex items-end gap-1">
+        <GeminiPlusMenu />
+        <ComposerPrimitive.Input
+          rows={1}
+          placeholder={placeholder}
+          className="max-h-40 flex-1 resize-none bg-transparent px-2 py-1.5 text-[17px] leading-6 text-[#1f1f1f] outline-none placeholder:text-[#575b5f] dark:text-[#e3e3e3] dark:placeholder:text-[#9aa0a6]"
+        />
+        <GeminiModelPicker />
+        <button
+          type="button"
+          aria-label="Voice mode"
+          className={`${ghostBtnClass} size-9`}
+        >
+          <Mic width={20} height={20} />
+        </button>
+        <GeminiSendButton />
+      </div>
+    </ComposerPrimitive.Root>
+  );
+};
+
+const GEMINI_TOOLS = [
+  { id: "research", label: "Deep Research", Icon: Telescope },
+  { id: "canvas", label: "Canvas", Icon: PencilRuler },
+  { id: "image", label: "Create image", Icon: ImageIcon },
+  { id: "learn", label: "Guided Learning", Icon: Lightbulb },
+];
+
+const GeminiPlusMenu: FC = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        aria-label="Add files and tools"
+        className={`${ghostBtnClass} size-9`}
+      >
+        <PlusIcon width={20} height={20} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" side="bottom" className="min-w-56">
+        <DropdownMenuItem render={<ComposerPrimitive.AddAttachment />}>
+          <span className="flex size-4 items-center justify-center">
+            <Paperclip className="size-4" />
+          </span>
+          Add photos &amp; files
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        {GEMINI_TOOLS.map(({ id, label, Icon }) => (
+          <DropdownMenuItem key={id}>
+            <Icon className="size-4" />
+            {label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const GEMINI_MODELS = [
+  { id: "flash", name: "Flash", description: "Fast all-around help" },
+  {
+    id: "thinking",
+    name: "Thinking",
+    description: "Reasoning, math & code",
+  },
+];
+
+const GeminiModelPicker: FC = () => {
+  const [model, setModel] = useState(GEMINI_MODELS[0]!.id);
+  const current = GEMINI_MODELS.find((m) => m.id === model);
+
+  return (
+    <div data-deploy-model-picker className="contents">
+    <DropdownMenu>
+      <DropdownMenuTrigger className="h-9 shrink-0 gap-0.5 rounded-full pr-1.5 pl-3 text-sm whitespace-nowrap text-[#444746] transition-colors hover:bg-[#444746]/8 hover:text-[#1f1f1f] dark:text-[#c4c7c5] dark:hover:bg-[#c4c7c5]/10 dark:hover:text-[#e3e3e3]">
+        <span>{current?.name}</span>
+        <ChevronDownIcon width={16} height={16} className="opacity-70" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" side="bottom" className="min-w-64">
+        {GEMINI_MODELS.map((m) => (
+          <DropdownMenuItem
+            key={m.id}
+            onClick={() => setModel(m.id)}
+            className="items-start gap-3"
+          >
+            <span className="mt-0.5 flex size-4 items-center justify-center text-[#0b57d0] dark:text-[#a8c7fa]">
+              {m.id === model ? <CheckIcon /> : null}
+            </span>
+            <span className="flex 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 sendBtnClass =
+  "flex size-9 shrink-0 items-center justify-center rounded-full bg-[#1f3b9b] text-white transition-colors hover:bg-[#274aad]";
+
+const GeminiSendButton: FC = () => {
+  return (
+    <>
+      <AuiIf condition={(s) => !s.thread.isRunning && !s.composer.isEmpty}>
+        <ComposerPrimitive.Send
+          aria-label="Send message"
+          className={`${sendBtnClass} disabled:bg-[#e8eaed] disabled:text-[#1f1f1f]/40 dark:disabled:bg-[#2b2c2e] dark:disabled:text-white/30`}
+        >
+          <ArrowUpIcon width={20} height={20} />
+        </ComposerPrimitive.Send>
+      </AuiIf>
+      <AuiIf condition={(s) => s.thread.isRunning}>
+        <ComposerPrimitive.Cancel
+          aria-label="Stop generating"
+          className={sendBtnClass}
+        >
+          <span className="size-3 rounded-[3px] bg-current" />
+        </ComposerPrimitive.Cancel>
+      </AuiIf>
+    </>
+  );
+};
+
+const actionBtnClass =
+  "flex size-8 items-center justify-center rounded-full text-[#444746] transition-colors hover:bg-[#444746]/8 hover:text-[#1f1f1f] dark:text-[#c4c7c5] dark:hover:bg-[#c4c7c5]/10 dark:hover:text-[#e3e3e3]";
+
+const ChatMessage: FC = () => {
+  const role = useAuiState((s) => s.message.role);
+  return (
+    <MessagePrimitive.Root data-role={role} className="group/message mx-auto mb-7 flex w-full max-w-3xl flex-col px-4">
+      <AuiIf condition={(s) => s.message.role === "user"}>
+        <div className="flex items-center justify-end gap-1">
+          <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.Copy className={actionBtnClass}>
+              <CopyIcon width={16} height={16} />
+            </ActionBarPrimitive.Copy>
+            <ActionBarPrimitive.Edit className={actionBtnClass}>
+              <PencilIcon width={16} height={16} />
+            </ActionBarPrimitive.Edit>
+          </ActionBarPrimitive.Root>
+          <div className="max-w-[75%] rounded-3xl bg-[#f2f0f0] px-5 py-3 wrap-break-word text-[#1f1f1f] dark:bg-[#333537] dark:text-[#e3e3e3]">
+            <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
+          </div>
+        </div>
+      </AuiIf>
+
+      <AuiIf condition={(s) => s.message.role === "assistant"}>
+        <div className="flex flex-col">
+          <div className="wrap-break-word text-[#1f1f1f] dark:text-[#e3e3e3]">
+            <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
+          </div>
+          <ActionBarPrimitive.Root data-export-chrome="" className="mt-1.5 -ml-2 flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100">
+            <ActionBarPrimitive.FeedbackPositive className={actionBtnClass}>
+              <ThumbsUp width={16} height={16} />
+            </ActionBarPrimitive.FeedbackPositive>
+            <ActionBarPrimitive.FeedbackNegative className={actionBtnClass}>
+              <ThumbsDown width={16} height={16} />
+            </ActionBarPrimitive.FeedbackNegative>
+            <ActionBarPrimitive.Copy className={actionBtnClass}>
+              <AuiIf condition={(s) => s.message.isCopied}>
+                <CheckIcon width={16} height={16} />
+              </AuiIf>
+              <AuiIf condition={(s) => !s.message.isCopied}>
+                <CopyIcon width={16} height={16} />
+              </AuiIf>
+            </ActionBarPrimitive.Copy>
+            <ActionBarPrimitive.Reload className={actionBtnClass}>
+              <RefreshCwIcon width={16} height={16} />
+            </ActionBarPrimitive.Reload>
+            <MessageExportMenu
+              trigger={
+                <button type="button" aria-label="More" className={actionBtnClass}>
+                  <EllipsisVertical 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>
+      </AuiIf>
+    </MessagePrimitive.Root>
+  );
+};
+
+const GeminiAttachment: FC = () => {
+  const isImage = useAuiState(({ attachment }) => attachment.type === "image");
+  const src = useAttachmentSrc();
+
+  return (
+    <AttachmentPrimitive.Root className="group/thumbnail relative">
+      <div className="size-[72px] overflow-hidden rounded-xl border border-[#dadce0] bg-[#f1f3f4] dark:border-[#3c4043] dark:bg-[#282a2c]">
+        {isImage && src ? (
+          <img className="size-full object-cover" alt="Attachment" src={src} />
+        ) : (
+          <div className="flex size-full items-center justify-center text-[#5e6063] dark:text-[#9aa0a6]">
+            <AttachmentPrimitive.unstable_Thumb className="text-xs" />
+          </div>
+        )}
+      </div>
+      <AttachmentPrimitive.Remove
+        className="absolute -top-1.5 -right-1.5 flex size-6 items-center justify-center rounded-full border border-[#dadce0] bg-white text-[#5e6063] opacity-0 transition-all group-focus-within/thumbnail:opacity-100 group-hover/thumbnail:opacity-100 hover:bg-[#f1f3f4] hover:text-[#1f1f1f] dark:border-[#3c4043] dark:bg-[#1e1f20] dark:text-[#9aa0a6] dark:hover:bg-[#2b2c2f] dark:hover:text-[#e3e3e3]"
+        aria-label="Remove attachment"
+      >
+        <XIcon width={14} height={14} />
+      </AttachmentPrimitive.Remove>
+    </AttachmentPrimitive.Root>
+  );
+};

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

@@ -0,0 +1,34 @@
+"use client";
+
+import type { SVGProps } from "react";
+
+export function GrokIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg aria-hidden="true" {...props} viewBox="0 0 1024 400" fill="none">
+      <path
+        d="M878.447 292.85V108.548H907.572V230.18L969.173 159.399H1004.48L949.069 220.058L1005 292.85H970.204L924.902 230.304L907.572 230.18V292.85H878.447Z"
+        fill="currentColor"
+      />
+      <path
+        d="M790.12 295.947C746.819 295.947 723.364 265.23 723.364 225.995C723.364 186.502 746.819 156.043 790.12 156.043C833.679 156.043 856.876 186.502 856.876 225.995C856.876 265.23 833.679 295.947 790.12 295.947ZM753.778 225.995C753.778 256.454 770.274 271.683 790.12 271.683C810.224 271.683 826.462 256.454 826.462 225.995C826.462 195.536 810.224 180.049 790.12 180.049C770.274 180.049 753.778 195.536 753.778 225.995Z"
+        fill="currentColor"
+      />
+      <path
+        d="M642.304 292.85V180.565L666.789 159.399H718.854V184.179H671.429V292.85H642.304Z"
+        fill="currentColor"
+      />
+      <path
+        d="M530.938 296.258C475.424 296.258 442.325 255.938 442.325 200.957C442.325 145.46 476.606 104.16 532.021 104.16C575.323 104.16 607.025 126.359 614.5 167.659H581.251C576.353 144.169 556.765 131.005 532.021 131.005C492.07 131.005 474.544 165.594 474.544 200.957C474.544 236.32 492.07 270.651 532.021 270.651C570.168 270.651 586.921 243.031 588.21 220.058H530.732V193.331H617.593L617.451 207.305C617.451 259.231 596.295 296.258 530.938 296.258Z"
+        fill="currentColor"
+      />
+      <path
+        d="M163.591 251.367L288.916 158.716C295.06 154.174 303.842 155.946 306.769 163.001C322.178 200.209 315.294 244.924 284.638 275.625C253.982 306.326 211.328 313.059 172.34 297.724L129.75 317.472C190.837 359.287 265.016 348.946 311.369 302.492C348.137 265.67 359.524 215.479 348.877 170.217L348.973 170.314C333.533 103.822 352.769 77.2447 392.174 22.898C393.107 21.6094 394.04 20.3208 394.973 19L343.119 70.9306V70.7695L163.559 251.399"
+        fill="currentColor"
+      />
+      <path
+        d="M137.728 273.885C93.8835 231.941 101.443 167.028 138.854 129.594C166.518 101.889 211.842 90.5817 251.409 107.205L293.902 87.5535C286.246 82.0126 276.435 76.0528 265.176 71.8648C214.287 50.8929 153.362 61.3305 111.994 102.727C72.2025 142.577 59.6893 203.85 81.1773 256.135C97.229 295.211 70.9158 322.852 44.4097 350.75C35.0167 360.64 25.5916 370.53 18 381L137.696 273.917"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}