@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/tooltip-icon-button.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { cn } from "../../../lib/utils";
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+
+type TooltipIconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  tooltip?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  variant?: string;
+  size?: string;
+  children?: ReactNode;
+};
+
+export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
+  function TooltipIconButton(
+    { tooltip, className, children, variant: _variant, size: _size, side: _side, ...props },
+    ref,
+  ) {
+    return (
+      <button
+        type="button"
+        ref={ref}
+        aria-label={tooltip}
+        title={tooltip}
+        className={cn(
+          "inline-flex size-8 items-center justify-center rounded-md transition-colors hover:bg-muted disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);

package/src/components/chat/skins/ui/dropdown-menu.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "../../../../lib/utils";
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 ring-foreground/10 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-surface,var(--radius-lg))] p-1.5 ring-1 duration-100 outline-none data-closed:overflow-hidden",
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 font-mono text-[11px] font-medium tracking-wide uppercase data-inset:pl-7",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-foreground/[0.06] data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-foreground/[0.06] data-open:bg-foreground/[0.06] data-popup-open:bg-foreground/[0.06] flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto size-4 rtl:rotate-180" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 ring-foreground/10 w-auto min-w-[96px] rounded-[var(--radius-surface,var(--radius-lg))] p-1 ring-1 duration-100",
+        className,
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-foreground/[0.06] relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-foreground/[0.06] relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-foreground/10 -mx-1.5 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto font-mono text-[11px] tracking-wider",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/src/components/chat/skins/webpage-assistant/assistant-config.ts

@@ -0,0 +1,238 @@
+import type { DocsAssistantConfig } from "./types";
+
+export const docsAssistantConfig = {
+  "productName": "Northstar Docs",
+  "docsName": "Product Guides",
+  "assistantName": "Product Docs Assistant",
+  "welcome": {
+    "headline": "Ask Product Guides",
+    "body": "Search source pages, preview related content, and get concise answers grounded in these docs."
+  },
+  "labels": {
+    "currentPage": "Current page",
+    "source": "Source",
+    "relatedPages": "Related pages",
+    "openPage": "Open in preview",
+    "headerSearch": "Search Product Guides with the assistant",
+    "articleCtaTitle": "Need a targeted answer?",
+    "articleCtaBody": "Use the assistant to search these docs with this page as context.",
+    "articleCtaAction": "Ask Product Docs Assistant",
+    "composerPlaceholder": "Ask about setup, auth, webhooks, examples, or the current page...",
+    "previewWarning": "Preview config could not be loaded. Showing default template."
+  },
+  "suggestedPrompts": [
+    {
+      "title": "How do I get started?",
+      "description": "Search the quickstart and related setup pages.",
+      "prompt": "Find the fastest product setup path",
+      "flowId": "auth401"
+    },
+    {
+      "title": "Find release notes",
+      "description": "Open product update docs.",
+      "prompt": "Find release note docs"
+    }
+  ],
+  "tools": [
+    {
+      "id": "searchDocs",
+      "displayName": "Search docs",
+      "aiDescription": "Search the documentation corpus and return relevant source pages with snippets.",
+      "realImplementationHint": "Replace the mock search with your docs index, vector store, or search provider.",
+      "rendererType": "sourceResults"
+    },
+    {
+      "id": "openPage",
+      "displayName": "Open page metadata",
+      "aiDescription": "Return metadata and a preview for a documentation page. This does not mutate the visible page.",
+      "realImplementationHint": "Look up the page by id or URL in your CMS and return safe metadata.",
+      "rendererType": "pagePreview"
+    },
+    {
+      "id": "generateCodeSnippet",
+      "displayName": "Generate code snippet",
+      "aiDescription": "Return a short implementation snippet for a docs topic and programming language.",
+      "realImplementationHint": "Use your SDK examples or an internal snippet library for production code.",
+      "rendererType": "codeSnippet"
+    }
+  ],
+  "demoModeNotice": "Demo mode is deterministic because no OPENAI_API_KEY is set. Add a key to enable live model responses.",
+  "demoFlows": {
+    "auth401": {
+      "title": "Search Guided Onboarding",
+      "triggerPhrases": [
+        "401",
+        "auth",
+        "authentication",
+        "api key",
+        "setup"
+      ],
+      "steps": [
+        {
+          "id": "search-auth-docs",
+          "assistantText": "I will search the source docs first.",
+          "toolId": "searchDocs",
+          "input": {
+            "query": "Guided Onboarding setup",
+            "limit": 3
+          },
+          "output": {
+            "query": "Guided Onboarding setup",
+            "results": [
+              {
+                "pageId": "guided-onboarding",
+                "title": "Guided Onboarding",
+                "section": "Product guides",
+                "url": "/docs/guided-onboarding",
+                "snippet": "Set up a workspace, invite teammates, and publish your first customer guide.",
+                "score": 90
+              },
+              {
+                "pageId": "guided-onboarding",
+                "title": "Guided Onboarding",
+                "section": "Product guides",
+                "url": "/docs/guided-onboarding",
+                "snippet": "Set up a workspace, invite teammates, and publish your first customer guide.",
+                "score": 78
+              }
+            ]
+          }
+        },
+        {
+          "id": "open-auth-page",
+          "assistantText": "This page is the strongest source match.",
+          "toolId": "openPage",
+          "input": {
+            "pageId": "guided-onboarding"
+          },
+          "output": {
+            "pageId": "guided-onboarding",
+            "title": "Guided Onboarding",
+            "section": "Product guides",
+            "url": "/docs/guided-onboarding",
+            "description": "Set up a workspace, invite teammates, and publish your first customer guide.",
+            "relatedPageIds": [
+              "roles-and-permissions",
+              "release-notes"
+            ]
+          }
+        }
+      ],
+      "finalResponse": "Use Guided Onboarding as the source of truth, then verify related setup on Guided Onboarding."
+    },
+    "webhooks": {
+      "title": "Find Guided Onboarding",
+      "triggerPhrases": [
+        "webhook",
+        "webhooks",
+        "event",
+        "events"
+      ],
+      "steps": [
+        {
+          "id": "search-webhook-docs",
+          "assistantText": "I will search for the relevant event or webhook page.",
+          "toolId": "searchDocs",
+          "input": {
+            "query": "Guided Onboarding setup",
+            "limit": 3
+          },
+          "output": {
+            "query": "Guided Onboarding setup",
+            "results": [
+              {
+                "pageId": "guided-onboarding",
+                "title": "Guided Onboarding",
+                "section": "Product guides",
+                "url": "/docs/guided-onboarding",
+                "snippet": "Set up a workspace, invite teammates, and publish your first customer guide.",
+                "score": 90
+              },
+              {
+                "pageId": "guided-onboarding",
+                "title": "Guided Onboarding",
+                "section": "Product guides",
+                "url": "/docs/guided-onboarding",
+                "snippet": "Set up a workspace, invite teammates, and publish your first customer guide.",
+                "score": 78
+              }
+            ]
+          }
+        },
+        {
+          "id": "open-webhook-page",
+          "assistantText": "I will open the best matching page metadata.",
+          "toolId": "openPage",
+          "input": {
+            "pageId": "guided-onboarding"
+          },
+          "output": {
+            "pageId": "guided-onboarding",
+            "title": "Guided Onboarding",
+            "section": "Product guides",
+            "url": "/docs/guided-onboarding",
+            "description": "Set up a workspace, invite teammates, and publish your first customer guide.",
+            "relatedPageIds": [
+              "roles-and-permissions",
+              "release-notes"
+            ]
+          }
+        }
+      ],
+      "finalResponse": "Start with Guided Onboarding, then review related pages before implementation."
+    },
+    "codeExample": {
+      "title": "Generate Guided Onboarding",
+      "triggerPhrases": [
+        "code",
+        "snippet",
+        "example",
+        "typescript",
+        "curl"
+      ],
+      "steps": [
+        {
+          "id": "search-example-docs",
+          "assistantText": "I will search for the source page for this example.",
+          "toolId": "searchDocs",
+          "input": {
+            "query": "Guided Onboarding code example",
+            "limit": 3
+          },
+          "output": {
+            "query": "Guided Onboarding code example",
+            "results": [
+              {
+                "pageId": "guided-onboarding",
+                "title": "Guided Onboarding",
+                "section": "Product guides",
+                "url": "/docs/guided-onboarding",
+                "snippet": "Set up a workspace, invite teammates, and publish your first customer guide.",
+                "score": 90
+              }
+            ]
+          }
+        },
+        {
+          "id": "generate-example",
+          "assistantText": "I will return a focused implementation snippet.",
+          "toolId": "generateCodeSnippet",
+          "input": {
+            "topic": "Guided Onboarding",
+            "language": "typescript"
+          },
+          "output": {
+            "topic": "Guided Onboarding",
+            "language": "typescript",
+            "docsUrl": "/docs/guided-onboarding",
+            "notes": [
+              "Replace this demo snippet with your production example."
+            ],
+            "code": "const response = await fetch(\"/api/example\");"
+          }
+        }
+      ],
+      "finalResponse": "Use this typescript example as a starting point, then adapt environment variables and error handling for your app."
+    }
+  }
+} satisfies DocsAssistantConfig;

package/src/components/chat/skins/webpage-assistant/assistant-modal.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { BotIcon, ChevronDownIcon } from "lucide-react";
+
+import { type FC, forwardRef, type ReactNode } from "react";
+import { AssistantModalPrimitive } from "@assistant-ui/react";
+
+import { Thread } from "../../stock/thread.aui";
+import { cn } from "../../../../lib/utils";
+
+export const AssistantModal: FC<{
+  children?: ReactNode;
+  tooltipOpen?: string;
+  tooltipClosed?: string;
+  className?: string;
+  defaultOpen?: boolean;
+}> = ({
+  children,
+  tooltipOpen = "Close Assistant",
+  tooltipClosed = "Open Assistant",
+  className,
+  defaultOpen = false,
+}) => {
+  return (
+    <AssistantModalPrimitive.Root defaultOpen={defaultOpen}>
+      <AssistantModalPrimitive.Anchor className="aui-root aui-modal-anchor fixed end-4 bottom-4 z-50 size-11">
+        <AssistantModalPrimitive.Trigger asChild>
+          <AssistantModalButton tooltipOpen={tooltipOpen} tooltipClosed={tooltipClosed} />
+        </AssistantModalPrimitive.Trigger>
+      </AssistantModalPrimitive.Anchor>
+      <AssistantModalPrimitive.Content
+        sideOffset={16}
+        className={cn(
+          "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(680px,calc(100dvh-6rem))] w-[min(420px,calc(100vw-2rem))] overflow-clip overscroll-contain rounded-xl border p-0 shadow-md outline-none [&>.aui-thread-root]:bg-inherit [&>.aui-thread-root_.aui-thread-viewport-footer]:bg-inherit",
+          className,
+        )}
+      >
+        {children ?? <Thread />}
+      </AssistantModalPrimitive.Content>
+    </AssistantModalPrimitive.Root>
+  );
+};
+
+type AssistantModalButtonProps = {
+  "data-state"?: "open" | "closed";
+  tooltipOpen: string;
+  tooltipClosed: string;
+};
+
+const AssistantModalButton = forwardRef<HTMLButtonElement, AssistantModalButtonProps>(
+  ({ "data-state": state, tooltipOpen, tooltipClosed, ...rest }, ref) => {
+    const tooltip = state === "open" ? tooltipOpen : tooltipClosed;
+
+    return (
+      <button
+        type="button"
+        aria-label={tooltip}
+        title={tooltip}
+        {...rest}
+        className="aui-modal-button bg-primary text-primary-foreground relative flex size-full items-center justify-center rounded-full shadow transition-transform hover:scale-110 hover:bg-primary/90 active:scale-90"
+        ref={ref}
+      >
+        <BotIcon
+          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>
+      </button>
+    );
+  },
+);
+
+AssistantModalButton.displayName = "AssistantModalButton";