@openconsole/shadcn 0.2.6 → 0.2.7

package/components/ai-elements/attachments.tsx

@@ -1,426 +0,0 @@
-"use client";
-
-import { Button } from "../ui/button";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "../ui/hover-card";
-import { cn } from "../../lib/utils";
-import type { FileUIPart, SourceDocumentUIPart } from "ai";
-import {
-  FileTextIcon,
-  GlobeIcon,
-  ImageIcon,
-  Music2Icon,
-  PaperclipIcon,
-  VideoIcon,
-  XIcon,
-} from "lucide-react";
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import { createContext, useCallback, useContext, useMemo } from "react";
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export type AttachmentData =
-  | (FileUIPart & { id: string })
-  | (SourceDocumentUIPart & { id: string });
-
-export type AttachmentMediaCategory =
-  | "image"
-  | "video"
-  | "audio"
-  | "document"
-  | "source"
-  | "unknown";
-
-export type AttachmentVariant = "grid" | "inline" | "list";
-
-const mediaCategoryIcons: Record<AttachmentMediaCategory, typeof ImageIcon> = {
-  audio: Music2Icon,
-  document: FileTextIcon,
-  image: ImageIcon,
-  source: GlobeIcon,
-  unknown: PaperclipIcon,
-  video: VideoIcon,
-};
-
-// ============================================================================
-// Utility Functions
-// ============================================================================
-
-export const getMediaCategory = (
-  data: AttachmentData
-): AttachmentMediaCategory => {
-  if (data.type === "source-document") {
-    return "source";
-  }
-
-  const mediaType = data.mediaType ?? "";
-
-  if (mediaType.startsWith("image/")) {
-    return "image";
-  }
-  if (mediaType.startsWith("video/")) {
-    return "video";
-  }
-  if (mediaType.startsWith("audio/")) {
-    return "audio";
-  }
-  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) {
-    return "document";
-  }
-
-  return "unknown";
-};
-
-export const getAttachmentLabel = (data: AttachmentData): string => {
-  if (data.type === "source-document") {
-    return data.title || data.filename || "Source";
-  }
-
-  const category = getMediaCategory(data);
-  return data.filename || (category === "image" ? "Image" : "Attachment");
-};
-
-const renderAttachmentImage = (
-  url: string,
-  filename: string | undefined,
-  isGrid: boolean
-) =>
-  isGrid ? (
-    <img
-      alt={filename || "Image"}
-      className="size-full object-cover"
-      height={96}
-      src={url}
-      width={96}
-    />
-  ) : (
-    <img
-      alt={filename || "Image"}
-      className="size-full rounded object-cover"
-      height={20}
-      src={url}
-      width={20}
-    />
-  );
-
-// ============================================================================
-// Contexts
-// ============================================================================
-
-interface AttachmentsContextValue {
-  variant: AttachmentVariant;
-}
-
-const AttachmentsContext = createContext<AttachmentsContextValue | null>(null);
-
-interface AttachmentContextValue {
-  data: AttachmentData;
-  mediaCategory: AttachmentMediaCategory;
-  onRemove?: () => void;
-  variant: AttachmentVariant;
-}
-
-const AttachmentContext = createContext<AttachmentContextValue | null>(null);
-
-// ============================================================================
-// Hooks
-// ============================================================================
-
-export const useAttachmentsContext = () =>
-  useContext(AttachmentsContext) ?? { variant: "grid" as const };
-
-export const useAttachmentContext = () => {
-  const ctx = useContext(AttachmentContext);
-  if (!ctx) {
-    throw new Error("Attachment components must be used within <Attachment>");
-  }
-  return ctx;
-};
-
-// ============================================================================
-// Attachments - Container
-// ============================================================================
-
-export type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
-  variant?: AttachmentVariant;
-};
-
-export const Attachments = ({
-  variant = "grid",
-  className,
-  children,
-  ...props
-}: AttachmentsProps) => {
-  const contextValue = useMemo(() => ({ variant }), [variant]);
-
-  return (
-    <AttachmentsContext.Provider value={contextValue}>
-      <div
-        className={cn(
-          "flex items-start",
-          variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
-          variant === "grid" && "ml-auto w-fit",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    </AttachmentsContext.Provider>
-  );
-};
-
-// ============================================================================
-// Attachment - Item
-// ============================================================================
-
-export type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
-  data: AttachmentData;
-  onRemove?: () => void;
-};
-
-export const Attachment = ({
-  data,
-  onRemove,
-  className,
-  children,
-  ...props
-}: AttachmentProps) => {
-  const { variant } = useAttachmentsContext();
-  const mediaCategory = getMediaCategory(data);
-
-  const contextValue = useMemo<AttachmentContextValue>(
-    () => ({ data, mediaCategory, onRemove, variant }),
-    [data, mediaCategory, onRemove, variant]
-  );
-
-  return (
-    <AttachmentContext.Provider value={contextValue}>
-      <div
-        className={cn(
-          "group relative",
-          variant === "grid" && "size-24 overflow-hidden rounded-lg",
-          variant === "inline" && [
-            "flex h-8 cursor-pointer select-none items-center gap-1.5",
-            "rounded-md border border-border px-1.5",
-            "font-medium text-sm transition-all",
-            "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-          ],
-          variant === "list" && [
-            "flex w-full items-center gap-3 rounded-lg border p-3",
-            "hover:bg-accent/50",
-          ],
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    </AttachmentContext.Provider>
-  );
-};
-
-// ============================================================================
-// AttachmentPreview - Media preview
-// ============================================================================
-
-export type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
-  fallbackIcon?: ReactNode;
-};
-
-export const AttachmentPreview = ({
-  fallbackIcon,
-  className,
-  ...props
-}: AttachmentPreviewProps) => {
-  const { data, mediaCategory, variant } = useAttachmentContext();
-
-  const iconSize = variant === "inline" ? "size-3" : "size-4";
-
-  const renderIcon = (Icon: typeof ImageIcon) => (
-    <Icon className={cn(iconSize, "text-muted-foreground")} />
-  );
-
-  const renderContent = () => {
-    if (mediaCategory === "image" && data.type === "file" && data.url) {
-      return renderAttachmentImage(data.url, data.filename, variant === "grid");
-    }
-
-    if (mediaCategory === "video" && data.type === "file" && data.url) {
-      return <video className="size-full object-cover" muted src={data.url} />;
-    }
-
-    const Icon = mediaCategoryIcons[mediaCategory];
-    return fallbackIcon ?? renderIcon(Icon);
-  };
-
-  return (
-    <div
-      className={cn(
-        "flex shrink-0 items-center justify-center overflow-hidden",
-        variant === "grid" && "size-full bg-muted",
-        variant === "inline" && "size-5 rounded bg-background",
-        variant === "list" && "size-12 rounded bg-muted",
-        className
-      )}
-      {...props}
-    >
-      {renderContent()}
-    </div>
-  );
-};
-
-// ============================================================================
-// AttachmentInfo - Name and type display
-// ============================================================================
-
-export type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
-  showMediaType?: boolean;
-};
-
-export const AttachmentInfo = ({
-  showMediaType = false,
-  className,
-  ...props
-}: AttachmentInfoProps) => {
-  const { data, variant } = useAttachmentContext();
-  const label = getAttachmentLabel(data);
-
-  if (variant === "grid") {
-    return null;
-  }
-
-  return (
-    <div className={cn("min-w-0 flex-1", className)} {...props}>
-      <span className="block truncate">{label}</span>
-      {showMediaType && data.mediaType && (
-        <span className="block truncate text-muted-foreground text-xs">
-          {data.mediaType}
-        </span>
-      )}
-    </div>
-  );
-};
-
-// ============================================================================
-// AttachmentRemove - Remove button
-// ============================================================================
-
-export type AttachmentRemoveProps = ComponentProps<typeof Button> & {
-  label?: string;
-};
-
-export const AttachmentRemove = ({
-  label = "Remove",
-  className,
-  children,
-  ...props
-}: AttachmentRemoveProps) => {
-  const { onRemove, variant } = useAttachmentContext();
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      onRemove?.();
-    },
-    [onRemove]
-  );
-
-  if (!onRemove) {
-    return null;
-  }
-
-  return (
-    <Button
-      aria-label={label}
-      className={cn(
-        variant === "grid" && [
-          "absolute top-2 right-2 size-6 rounded-full p-0",
-          "bg-background/80 backdrop-blur-sm",
-          "opacity-0 transition-opacity group-hover:opacity-100",
-          "hover:bg-background",
-          "[&>svg]:size-3",
-        ],
-        variant === "inline" && [
-          "size-5 rounded p-0",
-          "opacity-0 transition-opacity group-hover:opacity-100",
-          "[&>svg]:size-2.5",
-        ],
-        variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
-        className
-      )}
-      onClick={handleClick}
-      type="button"
-      variant="ghost"
-      {...props}
-    >
-      {children ?? <XIcon />}
-      <span className="sr-only">{label}</span>
-    </Button>
-  );
-};
-
-// ============================================================================
-// AttachmentHoverCard - Hover preview
-// ============================================================================
-
-export type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
-
-export const AttachmentHoverCard = ({
-  openDelay = 0,
-  closeDelay = 0,
-  ...props
-}: AttachmentHoverCardProps) => (
-  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
-);
-
-export type AttachmentHoverCardTriggerProps = ComponentProps<
-  typeof HoverCardTrigger
->;
-
-export const AttachmentHoverCardTrigger = (
-  props: AttachmentHoverCardTriggerProps
-) => <HoverCardTrigger {...props} />;
-
-export type AttachmentHoverCardContentProps = ComponentProps<
-  typeof HoverCardContent
->;
-
-export const AttachmentHoverCardContent = ({
-  align = "start",
-  className,
-  ...props
-}: AttachmentHoverCardContentProps) => (
-  <HoverCardContent
-    align={align}
-    className={cn("w-auto p-2", className)}
-    {...props}
-  />
-);
-
-// ============================================================================
-// AttachmentEmpty - Empty state
-// ============================================================================
-
-export type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
-
-export const AttachmentEmpty = ({
-  className,
-  children,
-  ...props
-}: AttachmentEmptyProps) => (
-  <div
-    className={cn(
-      "flex items-center justify-center p-4 text-muted-foreground text-sm",
-      className
-    )}
-    {...props}
-  >
-    {children ?? "No attachments"}
-  </div>
-);

package/components/ai-elements/audio-player.tsx

@@ -1,231 +0,0 @@
-"use client";
-
-import { Button } from "../ui/button";
-import {
-  ButtonGroup,
-  ButtonGroupText,
-} from "../ui/button-group";
-import { cn } from "../../lib/utils";
-import type { Experimental_SpeechResult as SpeechResult } from "ai";
-import {
-  MediaControlBar,
-  MediaController,
-  MediaDurationDisplay,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaSeekBackwardButton,
-  MediaSeekForwardButton,
-  MediaTimeDisplay,
-  MediaTimeRange,
-  MediaVolumeRange,
-} from "media-chrome/react";
-import type { ComponentProps, CSSProperties } from "react";
-
-export type AudioPlayerProps = Omit<
-  ComponentProps<typeof MediaController>,
-  "audio"
->;
-
-export const AudioPlayer = ({
-  children,
-  style,
-  ...props
-}: AudioPlayerProps) => (
-  <MediaController
-    audio
-    data-slot="audio-player"
-    style={
-      {
-        "--media-background-color": "transparent",
-        "--media-button-icon-height": "1rem",
-        "--media-button-icon-width": "1rem",
-        "--media-control-background": "transparent",
-        "--media-control-hover-background": "var(--color-accent)",
-        "--media-control-padding": "0",
-        "--media-font": "var(--font-sans)",
-        "--media-font-size": "10px",
-        "--media-icon-color": "currentColor",
-        "--media-preview-time-background": "var(--color-background)",
-        "--media-preview-time-border-radius": "var(--radius-md)",
-        "--media-preview-time-text-shadow": "none",
-        "--media-primary-color": "var(--color-primary)",
-        "--media-range-bar-color": "var(--color-primary)",
-        "--media-range-track-background": "var(--color-secondary)",
-        "--media-secondary-color": "var(--color-secondary)",
-        "--media-text-color": "var(--color-foreground)",
-        "--media-tooltip-arrow-display": "none",
-        "--media-tooltip-background": "var(--color-background)",
-        "--media-tooltip-border-radius": "var(--radius-md)",
-        ...style,
-      } as CSSProperties
-    }
-    {...props}
-  >
-    {children}
-  </MediaController>
-);
-
-export type AudioPlayerElementProps = Omit<ComponentProps<"audio">, "src"> &
-  (
-    | {
-        data: SpeechResult["audio"];
-      }
-    | {
-        src: string;
-      }
-  );
-
-export const AudioPlayerElement = ({ ...props }: AudioPlayerElementProps) => (
-  // oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) -- audio player captions are provided by consumer
-  <audio
-    data-slot="audio-player-element"
-    slot="media"
-    src={
-      "src" in props
-        ? props.src
-        : `data:${props.data.mediaType};base64,${props.data.base64}`
-    }
-    {...props}
-  />
-);
-
-export type AudioPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;
-
-export const AudioPlayerControlBar = ({
-  children,
-  ...props
-}: AudioPlayerControlBarProps) => (
-  <MediaControlBar data-slot="audio-player-control-bar" {...props}>
-    <ButtonGroup orientation="horizontal">{children}</ButtonGroup>
-  </MediaControlBar>
-);
-
-export type AudioPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;
-
-export const AudioPlayerPlayButton = ({
-  className,
-  ...props
-}: AudioPlayerPlayButtonProps) => (
-  <Button asChild size="icon-sm" variant="outline">
-    <MediaPlayButton
-      className={cn("bg-transparent", className)}
-      data-slot="audio-player-play-button"
-      {...props}
-    />
-  </Button>
-);
-
-export type AudioPlayerSeekBackwardButtonProps = ComponentProps<
-  typeof MediaSeekBackwardButton
->;
-
-export const AudioPlayerSeekBackwardButton = ({
-  seekOffset = 10,
-  ...props
-}: AudioPlayerSeekBackwardButtonProps) => (
-  <Button asChild size="icon-sm" variant="outline">
-    <MediaSeekBackwardButton
-      data-slot="audio-player-seek-backward-button"
-      seekOffset={seekOffset}
-      {...props}
-    />
-  </Button>
-);
-
-export type AudioPlayerSeekForwardButtonProps = ComponentProps<
-  typeof MediaSeekForwardButton
->;
-
-export const AudioPlayerSeekForwardButton = ({
-  seekOffset = 10,
-  ...props
-}: AudioPlayerSeekForwardButtonProps) => (
-  <Button asChild size="icon-sm" variant="outline">
-    <MediaSeekForwardButton
-      data-slot="audio-player-seek-forward-button"
-      seekOffset={seekOffset}
-      {...props}
-    />
-  </Button>
-);
-
-export type AudioPlayerTimeDisplayProps = ComponentProps<
-  typeof MediaTimeDisplay
->;
-
-export const AudioPlayerTimeDisplay = ({
-  className,
-  ...props
-}: AudioPlayerTimeDisplayProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaTimeDisplay
-      className={cn("tabular-nums", className)}
-      data-slot="audio-player-time-display"
-      {...props}
-    />
-  </ButtonGroupText>
-);
-
-export type AudioPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;
-
-export const AudioPlayerTimeRange = ({
-  className,
-  ...props
-}: AudioPlayerTimeRangeProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaTimeRange
-      className={cn("", className)}
-      data-slot="audio-player-time-range"
-      {...props}
-    />
-  </ButtonGroupText>
-);
-
-export type AudioPlayerDurationDisplayProps = ComponentProps<
-  typeof MediaDurationDisplay
->;
-
-export const AudioPlayerDurationDisplay = ({
-  className,
-  ...props
-}: AudioPlayerDurationDisplayProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaDurationDisplay
-      className={cn("tabular-nums", className)}
-      data-slot="audio-player-duration-display"
-      {...props}
-    />
-  </ButtonGroupText>
-);
-
-export type AudioPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;
-
-export const AudioPlayerMuteButton = ({
-  className,
-  ...props
-}: AudioPlayerMuteButtonProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaMuteButton
-      className={cn("", className)}
-      data-slot="audio-player-mute-button"
-      {...props}
-    />
-  </ButtonGroupText>
-);
-
-export type AudioPlayerVolumeRangeProps = ComponentProps<
-  typeof MediaVolumeRange
->;
-
-export const AudioPlayerVolumeRange = ({
-  className,
-  ...props
-}: AudioPlayerVolumeRangeProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaVolumeRange
-      className={cn("", className)}
-      data-slot="audio-player-volume-range"
-      {...props}
-    />
-  </ButtonGroupText>
-);

package/components/ai-elements/canvas.tsx

@@ -1,26 +0,0 @@
-import type { ReactFlowProps } from "@xyflow/react";
-import { Background, ReactFlow } from "@xyflow/react";
-import type { ReactNode } from "react";
-
-import "@xyflow/react/dist/style.css";
-
-type CanvasProps = ReactFlowProps & {
-  children?: ReactNode;
-};
-
-const deleteKeyCode = ["Backspace", "Delete"];
-
-export const Canvas = ({ children, ...props }: CanvasProps) => (
-  <ReactFlow
-    deleteKeyCode={deleteKeyCode}
-    fitView
-    panOnDrag={false}
-    panOnScroll
-    selectionOnDrag={true}
-    zoomOnDoubleClick={false}
-    {...props}
-  >
-    <Background bgColor="var(--sidebar)" />
-    {children}
-  </ReactFlow>
-);