@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/stock/file.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { memo, type FC } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  FileIcon,
+  FileTextIcon,
+  ImageIcon,
+  MusicIcon,
+  VideoIcon,
+  BracesIcon,
+  DownloadIcon,
+} from "lucide-react";
+import type { FileMessagePartComponent } from "@assistant-ui/react";
+import { cn } from "../../../lib/utils";
+
+const fileVariants = cva(
+  "aui-file-root inline-flex items-center gap-3 rounded-lg transition-colors",
+  {
+    variants: {
+      variant: {
+        outline: "border-hair hover:bg-surface-2/50 border",
+        ghost: "hover:bg-surface-2/50",
+        muted: "bg-surface-2/50 hover:bg-surface-2",
+      },
+      size: {
+        sm: "px-2.5 py-1.5 text-xs",
+        default: "px-3 py-2 text-sm",
+        lg: "px-4 py-3 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default",
+    },
+  },
+);
+
+function getMimeTypeIcon(mimeType: string): FC<{ className?: string }> {
+  const type = mimeType.toLowerCase();
+  if (type.startsWith("image/")) {
+    return ImageIcon;
+  }
+  if (type === "application/pdf") {
+    return FileTextIcon;
+  }
+  if (type === "application/json") {
+    return BracesIcon;
+  }
+  if (type.startsWith("text/")) {
+    return FileTextIcon;
+  }
+  if (type.startsWith("audio/")) {
+    return MusicIcon;
+  }
+  if (type.startsWith("video/")) {
+    return VideoIcon;
+  }
+  return FileIcon;
+}
+
+export type FileDataKind = "data-uri" | "url" | "base64" | "id";
+
+function getFileDataKind(
+  data: string,
+  sourceType?: "url" | "id",
+): FileDataKind {
+  if (sourceType === "url" && /^data:/i.test(data)) return "data-uri";
+  if (sourceType) return sourceType;
+  if (/^data:/i.test(data)) return "data-uri";
+  if (/^https?:\/\//i.test(data)) return "url";
+  return "base64";
+}
+
+function getBase64Size(base64: string): number {
+  const commaIndex = base64.indexOf(",");
+  const base64Data = commaIndex >= 0 ? base64.slice(commaIndex + 1) : base64;
+  const padding = (base64Data.match(/=/g) || []).length;
+  return Math.floor((base64Data.length * 3) / 4) - padding;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export type FileRootProps = React.ComponentProps<"div"> &
+  VariantProps<typeof fileVariants>;
+
+function FileRoot({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: FileRootProps) {
+  return (
+    <div
+      data-slot="file-root"
+      data-variant={variant}
+      data-size={size}
+      className={cn(fileVariants({ variant, size, className }))}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+type FileIconDisplayProps = React.ComponentProps<"span"> & {
+  mimeType?: string;
+};
+
+function FileIconDisplay({
+  mimeType,
+  className,
+  children,
+  ...props
+}: FileIconDisplayProps) {
+  const IconComponent = mimeType ? getMimeTypeIcon(mimeType) : FileIcon;
+
+  return (
+    <span
+      data-slot="file-icon"
+      className={cn("text-ink-mute shrink-0", className)}
+      {...props}
+    >
+      {children ?? <IconComponent className="size-5" />}
+    </span>
+  );
+}
+
+function FileName({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="file-name"
+      className={cn("min-w-0 flex-1 truncate font-medium", className)}
+      {...props}
+    >
+      {children || "Unnamed file"}
+    </span>
+  );
+}
+
+type FileSizeProps = React.ComponentProps<"span"> & {
+  bytes: number;
+};
+
+function FileSize({ bytes, className, ...props }: FileSizeProps) {
+  return (
+    <span
+      data-slot="file-size"
+      className={cn("text-ink-mute shrink-0", className)}
+      {...props}
+    >
+      {formatFileSize(bytes)}
+    </span>
+  );
+}
+
+type FileDownloadProps = Omit<React.ComponentProps<"a">, "href"> & {
+  data: string;
+  mimeType: string;
+  filename?: string;
+  sourceType?: "url" | "id";
+};
+
+function FileDownload({
+  data,
+  mimeType,
+  filename,
+  sourceType,
+  className,
+  children,
+  ...props
+}: FileDownloadProps) {
+  if (typeof data !== "string") return null;
+  const kind = getFileDataKind(data, sourceType);
+  if (kind === "id") return null;
+  if (kind === "url" && !/^(https?:\/\/|blob:)/i.test(data)) return null;
+  const href = kind === "base64" ? `data:${mimeType};base64,${data}` : data;
+
+  return (
+    <a
+      data-slot="file-download"
+      href={href}
+      download={filename || "download"}
+      {...(kind === "url" && { target: "_blank", rel: "noopener noreferrer" })}
+      className={cn(
+        "text-ink-mute hover:bg-accent hover:text-accent-foreground shrink-0 rounded-md p-1 transition-colors",
+        className,
+      )}
+      {...props}
+    >
+      {children || <DownloadIcon className="size-4" />}
+    </a>
+  );
+}
+
+const FileImpl: FileMessagePartComponent = ({
+  filename,
+  data,
+  mimeType,
+  sourceType,
+}) => {
+  const kind = getFileDataKind(data, sourceType);
+  const showSize =
+    typeof data === "string" && (kind === "base64" || kind === "data-uri");
+
+  return (
+    <FileRoot>
+      <FileIconDisplay mimeType={mimeType} />
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <FileName>{filename}</FileName>
+        {showSize && (
+          <FileSize bytes={getBase64Size(data)} className="text-xs" />
+        )}
+      </div>
+      <FileDownload
+        data={data}
+        mimeType={mimeType}
+        {...(filename !== undefined && { filename })}
+        {...(sourceType !== undefined && { sourceType })}
+      />
+    </FileRoot>
+  );
+};
+
+const File = memo(FileImpl) as unknown as FileMessagePartComponent & {
+  Root: typeof FileRoot;
+  Icon: typeof FileIconDisplay;
+  Name: typeof FileName;
+  Size: typeof FileSize;
+  Download: typeof FileDownload;
+};
+
+File.displayName = "File";
+File.Root = FileRoot;
+File.Icon = FileIconDisplay;
+File.Name = FileName;
+File.Size = FileSize;
+File.Download = FileDownload;
+
+export {
+  File,
+  FileRoot,
+  FileIconDisplay,
+  FileName,
+  FileSize,
+  FileDownload,
+  fileVariants,
+  getMimeTypeIcon,
+  getFileDataKind,
+  getBase64Size,
+  formatFileSize,
+};

package/src/components/chat/stock/follow-up-suggestions.aui.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { AuiIf, useAuiState, ThreadPrimitive } from "@assistant-ui/react";
+import { useCallback, useEffect, useRef, useState, type FC } from "react";
+import { SuggestionScrollRow } from "../suggestion-scroll-row";
+
+const FollowupSuggestionsRow: FC = () => {
+  const suggestions = useAuiState((s) => s.thread.suggestions);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const rtlRef = useRef<boolean | null>(null);
+  const [fades, setFades] = useState({ left: false, right: false });
+
+  const updateFades = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    // scrollLeft runs 0..-max in RTL; normalize to hidden width per physical edge.
+    const fromStart = Math.abs(el.scrollLeft);
+    // getComputedStyle forces a style recalc per scroll event; direction is stable, read it once.
+    const rtl = (rtlRef.current ??= getComputedStyle(el).direction === "rtl");
+    const [left, right] = rtl
+      ? [maxScroll - fromStart, fromStart]
+      : [fromStart, maxScroll - fromStart];
+    setFades((prev) => {
+      const next = { left: left > 1, right: right > 1 };
+      return prev.left === next.left && prev.right === next.right ? prev : next;
+    });
+  }, []);
+
+  useEffect(() => {
+    updateFades();
+    const el = scrollRef.current;
+    if (!el?.firstElementChild) return undefined;
+    const observer = new ResizeObserver(updateFades);
+    observer.observe(el);
+    observer.observe(el.firstElementChild);
+    return () => observer.disconnect();
+  }, [updateFades]);
+
+  const maskImage = `linear-gradient(to right, ${
+    fades.left ? "transparent, black 2rem" : "black"
+  }, ${fades.right ? "black calc(100% - 2rem), transparent" : "black"})`;
+
+  return (
+    <SuggestionScrollRow
+      ref={scrollRef}
+      onScroll={updateFades}
+      // overflow-x clips both axes; py-1/-my-1 gives focus rings vertical room without changing outer height.
+      className="aui-thread-followup-suggestions -my-1 w-full py-1"
+      style={{ maskImage, WebkitMaskImage: maskImage }}
+    >
+      <div className="mx-auto flex min-h-8 w-max items-center gap-2 px-0.5">
+        {suggestions.map((suggestion, idx) => (
+          <ThreadPrimitive.Suggestion
+            key={idx}
+            className="aui-thread-followup-suggestion bg-surface hover:bg-surface-2 rounded-md border px-3 py-1 text-sm whitespace-nowrap transition-colors ease-in"
+            prompt={suggestion.prompt}
+            send
+          >
+            {suggestion.title ?? suggestion.prompt}
+            {suggestion.label && (
+              <span className="aui-thread-followup-suggestion-label text-ink-mute ms-1">
+                {suggestion.label}
+              </span>
+            )}
+          </ThreadPrimitive.Suggestion>
+        ))}
+      </div>
+    </SuggestionScrollRow>
+  );
+};
+
+export const ThreadFollowupSuggestions: FC = () => (
+  <AuiIf
+    condition={(s) =>
+      !s.thread.isEmpty &&
+      !s.thread.isRunning &&
+      s.thread.suggestions.length > 0
+    }
+  >
+    <FollowupSuggestionsRow />
+  </AuiIf>
+);