@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/base/elements/directive-text.aui.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { memo } from "react";
+import type { TextMessagePartComponent } from "@assistant-ui/react";
+import type { Unstable_DirectiveFormatter } from "@assistant-ui/react";
+import { unstable_defaultDirectiveFormatter } from "@assistant-ui/react";
+import {
+  createDirectiveText as createDirectiveTextBase,
+  type CreateDirectiveTextOptions,
+} from "./directive-text";
+
+export type {
+  CreateDirectiveTextOptions,
+  DirectiveTextFormatter,
+  DirectiveTextSegment,
+} from "./directive-text";
+
+/** Creates a `Text` message part component that parses directive syntax and renders inline chips. */
+export function createDirectiveText(
+  formatter: Unstable_DirectiveFormatter,
+  options?: CreateDirectiveTextOptions,
+): TextMessagePartComponent {
+  return createDirectiveTextBase(formatter, options);
+}
+
+/** `Text` message part component that renders directive syntax as inline chips. */
+export const DirectiveText: TextMessagePartComponent = memo(
+  createDirectiveTextBase(unstable_defaultDirectiveFormatter),
+);

package/src/components/chat/skins/base/elements/directive-text.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { FC } from "react";
+import { Badge } from "../ui/badge";
+
+type IconComponent = FC<{ className?: string }>;
+
+export type DirectiveTextSegment =
+  | { readonly kind: "text"; readonly text: string }
+  | {
+      readonly kind: "mention";
+      readonly type: string;
+      readonly label: string;
+      readonly id: string;
+    };
+
+export type DirectiveTextFormatter = {
+  /** Parse text into alternating text and directive segments. */
+  parse(text: string): readonly DirectiveTextSegment[];
+};
+
+export type CreateDirectiveTextOptions = {
+  /** Maps a directive `type` to an icon component. */
+  iconMap?: Record<string, IconComponent>;
+  /** Icon rendered when `iconMap` has no entry for the segment type. */
+  fallbackIcon?: IconComponent;
+};
+
+/** Creates a text component that parses directive syntax and renders inline chips. */
+export function createDirectiveText(
+  formatter: DirectiveTextFormatter,
+  options?: CreateDirectiveTextOptions,
+): FC<{ text: string }> {
+  const iconMap = options?.iconMap;
+  const fallbackIcon = options?.fallbackIcon;
+
+  const Component: FC<{ text: string }> = ({ text }) => {
+    const segments = formatter.parse(text);
+
+    if (segments.length === 1 && segments[0]!.kind === "text") {
+      return <>{text}</>;
+    }
+
+    return (
+      <>
+        {segments.map((seg, i) => {
+          if (seg.kind === "text") {
+            return (
+              <span key={i} className="whitespace-pre-wrap">
+                {seg.text}
+              </span>
+            );
+          }
+
+          const Icon = iconMap?.[seg.type] ?? fallbackIcon;
+          return (
+            <Badge
+              key={i}
+              variant="secondary"
+              data-slot="directive-text-chip"
+              data-directive-type={seg.type}
+              data-directive-id={seg.id}
+              aria-label={`${seg.type}: ${seg.label}`}
+              className="aui-directive-chip items-baseline px-1.5 py-0.5 text-[13px] leading-none [&_svg]:self-center"
+            >
+              {Icon && <Icon />}
+              {seg.label}
+            </Badge>
+          );
+        })}
+      </>
+    );
+  };
+  Component.displayName = "DirectiveText";
+  return Component;
+}

package/src/components/chat/skins/base/elements/message-timing.aui.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useMessageTiming } from "@assistant-ui/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { cn } from "../../../../../lib/utils";
+import type { FC } from "react";
+
+const formatTimingMs = (ms: number | undefined): string => {
+  if (ms === undefined) return "—";
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+};
+
+/**
+ * Shows streaming stats (TTFT, total time, tok/s, chunks) as a badge with a
+ * hover/focus tooltip. Renders nothing until the stream completes.
+ *
+ * Place it inside `ActionBarPrimitive.Root` in your `thread.tsx` so it
+ * inherits the action bar's autohide behaviour:
+ *
+ * ```tsx
+ * import { MessageTiming } from "@/components/assistant-ui/elements/message-timing.aui";
+ *
+ * <ActionBarPrimitive.Root >
+ *   <ActionBarPrimitive.Copy />
+ *   <ActionBarPrimitive.Reload />
+ *   <MessageTiming />  // <-- add this
+ * </ActionBarPrimitive.Root>
+ * ```
+ *
+ * @param side - Side of the tooltip relative to the badge trigger.
+ * @default "right"
+ */
+export const MessageTiming: FC<{
+  className?: string;
+  side?: "top" | "right" | "bottom" | "left";
+}> = ({ className, side = "right" }) => {
+  const timing = useMessageTiming();
+  if (timing?.totalStreamTime === undefined) return null;
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              data-slot="message-timing-trigger"
+              aria-label="Message timing"
+              className={cn(
+                "text-muted-foreground hover:bg-muted hover:text-foreground flex items-center rounded-md p-1 font-mono text-xs tabular-nums transition-colors",
+                className,
+              )}
+            />
+          }
+        >
+          {formatTimingMs(timing.totalStreamTime)}
+        </TooltipTrigger>
+        <TooltipContent
+          side={side}
+          sideOffset={8}
+          data-slot="message-timing-popover"
+          className="bg-popover text-popover-foreground border px-3 py-2 [&_[data-slot=tooltip-arrow]]:hidden"
+        >
+          <div className="grid min-w-35 gap-1.5 text-xs">
+            {timing.firstTokenTime !== undefined && (
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-muted-foreground">First token</span>
+                <span className="font-mono tabular-nums">
+                  {formatTimingMs(timing.firstTokenTime)}
+                </span>
+              </div>
+            )}
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-muted-foreground">Total</span>
+              <span className="font-mono tabular-nums">
+                {formatTimingMs(timing.totalStreamTime)}
+              </span>
+            </div>
+            {timing.tokensPerSecond !== undefined && (
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-muted-foreground">Speed</span>
+                <span className="font-mono tabular-nums">
+                  {timing.tokensPerSecond.toFixed(1)} tok/s
+                </span>
+              </div>
+            )}
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-muted-foreground">Chunks</span>
+              <span className="font-mono tabular-nums">
+                {timing.totalChunks}
+              </span>
+            </div>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

package/src/components/chat/skins/base/elements/model-selector.aui.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { memo, useEffect } from "react";
+import { useAui } from "@assistant-ui/react";
+import {
+  ModelSelectorRoot,
+  ModelSelectorTrigger,
+  ModelSelectorValue,
+  ModelSelectorContent,
+  ModelSelectorSearch,
+  ModelSelectorFocusAnchor,
+  ModelSelectorList,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorSeparator,
+  ModelSelectorItem,
+  ModelSelectorEffort,
+  useModelSelectorContext,
+  type ModelSelectorProps,
+} from "./model-selector";
+
+export {
+  DEFAULT_EFFORT_OPTIONS,
+  modelSelectorTriggerVariants,
+  resolveModelEffort,
+  useModelSelectorEfforts,
+  ModelSelectorRoot,
+  ModelSelectorTrigger,
+  ModelSelectorValue,
+  ModelSelectorContent,
+  ModelSelectorSearch,
+  ModelSelectorFocusAnchor,
+  ModelSelectorList,
+  ModelSelectorEmpty,
+  ModelSelectorGroup,
+  ModelSelectorSeparator,
+  ModelSelectorItem,
+  ModelSelectorEffort,
+} from "./model-selector";
+
+export type {
+  ModelOption,
+  ModelSelectorEffortOption,
+  ModelSelectorProps,
+  ModelSelectorRootProps,
+  ModelSelectorTriggerProps,
+  ModelSelectorValueProps,
+  ModelSelectorContentProps,
+  ModelSelectorSearchProps,
+  ModelSelectorListProps,
+  ModelSelectorEmptyProps,
+  ModelSelectorGroupProps,
+  ModelSelectorSeparatorProps,
+  ModelSelectorItemProps,
+  ModelSelectorEffortProps,
+} from "./model-selector";
+
+/** Registers the selection with assistant-ui's ModelContext system. The
+ * context's effort is already resolved against the selected model. */
+function ModelSelectorModelContext() {
+  const { value, effort } = useModelSelectorContext();
+  const api = useAui();
+
+  useEffect(() => {
+    if (value === undefined) return;
+    const config = {
+      config: {
+        modelName: value,
+        ...(effort !== undefined ? { reasoningEffort: effort } : undefined),
+      },
+    };
+    return api.modelContext.register({
+      getModelContext: () => config,
+    });
+  }, [api, value, effort]);
+
+  return null;
+}
+
+const ModelSelectorImpl = ({
+  searchable,
+  variant,
+  size,
+  align,
+  className,
+  contentClassName,
+  ...rootProps
+}: ModelSelectorProps) => {
+  return (
+    <ModelSelectorRoot {...rootProps}>
+      <ModelSelectorModelContext />
+      <ModelSelectorTrigger
+        variant={variant}
+        size={size}
+        className={className}
+      />
+      <ModelSelectorContent
+        {...(align !== undefined ? { align } : {})}
+        className={contentClassName}
+        searchable={searchable ?? false}
+      />
+    </ModelSelectorRoot>
+  );
+};
+
+type ModelSelectorComponent = typeof ModelSelectorImpl & {
+  displayName?: string;
+  Root: typeof ModelSelectorRoot;
+  Trigger: typeof ModelSelectorTrigger;
+  Value: typeof ModelSelectorValue;
+  Content: typeof ModelSelectorContent;
+  Search: typeof ModelSelectorSearch;
+  FocusAnchor: typeof ModelSelectorFocusAnchor;
+  List: typeof ModelSelectorList;
+  Empty: typeof ModelSelectorEmpty;
+  Group: typeof ModelSelectorGroup;
+  Separator: typeof ModelSelectorSeparator;
+  Item: typeof ModelSelectorItem;
+  Effort: typeof ModelSelectorEffort;
+};
+
+const ModelSelector = memo(
+  ModelSelectorImpl,
+) as unknown as ModelSelectorComponent;
+
+ModelSelector.displayName = "ModelSelector";
+ModelSelector.Root = ModelSelectorRoot;
+ModelSelector.Trigger = ModelSelectorTrigger;
+ModelSelector.Value = ModelSelectorValue;
+ModelSelector.Content = ModelSelectorContent;
+ModelSelector.Search = ModelSelectorSearch;
+ModelSelector.FocusAnchor = ModelSelectorFocusAnchor;
+ModelSelector.List = ModelSelectorList;
+ModelSelector.Empty = ModelSelectorEmpty;
+ModelSelector.Group = ModelSelectorGroup;
+ModelSelector.Separator = ModelSelectorSeparator;
+ModelSelector.Item = ModelSelectorItem;
+ModelSelector.Effort = ModelSelectorEffort;
+
+export { ModelSelector };