@oppulence/design-system 1.0.4 → 1.0.6

package/src/components/molecules/inline-citation.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+import { cn } from "../../../lib/utils";
+import { badgeVariants } from "../atoms/badge";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "../organisms/carousel";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card";
+
+export type InlineCitationProps = Omit<
+  ComponentProps<"span">,
+  "className"
+>;
+
+export const InlineCitation = ({ ...props }: InlineCitationProps) => (
+  <span className="group inline items-center gap-1" {...props} />
+);
+
+export type InlineCitationTextProps = Omit<
+  ComponentProps<"span">,
+  "className"
+>;
+
+export const InlineCitationText = ({ ...props }: InlineCitationTextProps) => (
+  <span className="transition-colors group-hover:bg-accent" {...props} />
+);
+
+export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+
+export const InlineCitationCard = (props: InlineCitationCardProps) => (
+  <HoverCard closeDelay={0} openDelay={0} {...props} />
+);
+
+export type InlineCitationCardTriggerProps =
+  Omit<ComponentProps<"span">, "className"> & {
+    sources: string[];
+  };
+
+export const InlineCitationCardTrigger = ({
+  sources,
+  ...props
+}: InlineCitationCardTriggerProps) => (
+  <HoverCardTrigger
+    render={
+      <span
+        className={cn(
+          badgeVariants({ variant: "secondary" }),
+          "ml-1 rounded-full",
+        )}
+        {...props}
+      />
+    }
+  >
+    {sources.length ? (
+      <>
+        {new URL(sources[0]!).hostname} {sources.length > 1 && `+${sources.length - 1}`}
+      </>
+    ) : (
+      "unknown"
+    )}
+  </HoverCardTrigger>
+);
+
+export type InlineCitationCardBodyProps = Omit<
+  ComponentProps<"div">,
+  "className"
+>;
+
+export const InlineCitationCardBody = ({
+  children,
+  ...props
+}: InlineCitationCardBodyProps) => (
+  <HoverCardContent>
+    <div className="relative w-80 p-0" {...props}>
+      {children}
+    </div>
+  </HoverCardContent>
+);
+
+const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
+
+const useCarouselApi = () => {
+  const context = useContext(CarouselApiContext);
+  return context;
+};
+
+export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+
+export const InlineCitationCarousel = ({
+  children,
+  ...props
+}: InlineCitationCarouselProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+
+  return (
+    <CarouselApiContext.Provider value={api}>
+      <div className="w-full">
+        <Carousel setApi={setApi} {...props}>
+          {children}
+        </Carousel>
+      </div>
+    </CarouselApiContext.Provider>
+  );
+};
+
+export type InlineCitationCarouselContentProps = ComponentProps<
+  typeof CarouselContent
+>;
+
+export const InlineCitationCarouselContent = (
+  props: InlineCitationCarouselContentProps,
+) => <CarouselContent {...props} />;
+
+export type InlineCitationCarouselItemProps = ComponentProps<
+  typeof CarouselItem
+>;
+
+export const InlineCitationCarouselItem = ({
+  children,
+  ...props
+}: InlineCitationCarouselItemProps) => (
+  <CarouselItem {...props}>
+    <div className="w-full space-y-2 p-4 pl-8">{children}</div>
+  </CarouselItem>
+);
+
+export type InlineCitationCarouselHeaderProps = Omit<
+  ComponentProps<"div">,
+  "className"
+>;
+
+export const InlineCitationCarouselHeader = ({
+  ...props
+}: InlineCitationCarouselHeaderProps) => (
+  <div
+    className="flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2"
+    {...props}
+  />
+);
+
+export type InlineCitationCarouselIndexProps = Omit<
+  ComponentProps<"div">,
+  "className"
+>;
+
+export const InlineCitationCarouselIndex = ({
+  children,
+  ...props
+}: InlineCitationCarouselIndexProps) => {
+  const api = useCarouselApi();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  return (
+    <div
+      className="flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs"
+      {...props}
+    >
+      {children ?? `${current}/${count}`}
+    </div>
+  );
+};
+
+export type InlineCitationCarouselPrevProps = Omit<
+  ComponentProps<"button">,
+  "className"
+>;
+
+export const InlineCitationCarouselPrev = ({
+  ...props
+}: InlineCitationCarouselPrevProps) => {
+  const api = useCarouselApi();
+
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollPrev();
+    }
+  }, [api]);
+
+  return (
+    <button
+      aria-label="Previous"
+      className="shrink-0"
+      onClick={handleClick}
+      type="button"
+      {...props}
+    >
+      <ArrowLeftIcon className="size-4 text-muted-foreground" />
+    </button>
+  );
+};
+
+export type InlineCitationCarouselNextProps = Omit<
+  ComponentProps<"button">,
+  "className"
+>;
+
+export const InlineCitationCarouselNext = ({
+  ...props
+}: InlineCitationCarouselNextProps) => {
+  const api = useCarouselApi();
+
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollNext();
+    }
+  }, [api]);
+
+  return (
+    <button
+      aria-label="Next"
+      className="shrink-0"
+      onClick={handleClick}
+      type="button"
+      {...props}
+    >
+      <ArrowRightIcon className="size-4 text-muted-foreground" />
+    </button>
+  );
+};
+
+export type InlineCitationSourceProps = Omit<
+  ComponentProps<"div">,
+  "className"
+> & {
+  title?: string;
+  url?: string;
+  description?: string;
+};
+
+export const InlineCitationSource = ({
+  title,
+  url,
+  description,
+  children,
+  ...props
+}: InlineCitationSourceProps) => (
+  <div className="space-y-1" {...props}>
+    {title && (
+      <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
+    )}
+    {url && (
+      <p className="truncate break-all text-muted-foreground text-xs">{url}</p>
+    )}
+    {description && (
+      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
+        {description}
+      </p>
+    )}
+    {children}
+  </div>
+);
+
+export type InlineCitationQuoteProps = Omit<
+  ComponentProps<"blockquote">,
+  "className"
+>;
+
+export const InlineCitationQuote = ({
+  children,
+  ...props
+}: InlineCitationQuoteProps) => (
+  <blockquote
+    className="border-muted border-l-2 pl-3 text-muted-foreground text-sm italic"
+    {...props}
+  >
+    {children}
+  </blockquote>
+);

package/src/components/molecules/message.tsx

@@ -0,0 +1,64 @@
+import type { ChatRole } from "../../../lib/ai";
+import { cn } from "../../../lib/utils";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../atoms/avatar";
+
+export type MessageProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+  from: ChatRole;
+};
+
+export const Message = ({ from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      "group flex w-full items-end justify-end gap-2 py-4",
+      from === "user" ? "is-user" : "is-assistant flex-row-reverse justify-end",
+      "[&>div]:max-w-[80%]",
+    )}
+    {...props}
+  />
+);
+
+export type MessageContentProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+>;
+
+export const MessageContent = ({
+  children,
+  ...props
+}: MessageContentProps) => (
+  <div
+    className={cn(
+      "flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm",
+      "group-[.is-user]:!bg-[#F7F7F7] dark:group-[.is-user]:!bg-[#131313] group-[.is-user]:!text-primary group-[.is-user]:!px-4 group-[.is-user]:!py-2 group-[.is-user]:max-w-fit group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-none",
+      "group-[.is-assistant]:!bg-transparent group-[.is-assistant]:!shadow-none group-[.is-assistant]:!border-none group-[.is-assistant]:!px-0 group-[.is-assistant]:!py-0 group-[.is-assistant]:!rounded-none group-[.is-assistant]:!text-[#666666]",
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageAvatarProps = Omit<
+  ComponentProps<typeof Avatar>,
+  "className"
+> & {
+  src: string;
+  name?: string;
+  size?: "xs" | "sm" | "default" | "lg" | "xl";
+};
+
+export const MessageAvatar = ({
+  src,
+  name,
+  size = "xs",
+  ...props
+}: MessageAvatarProps) => (
+  <Avatar size={size} {...props}>
+    <AvatarImage alt="" src={src} />
+    <AvatarFallback>
+      {name?.slice(0, 1) || "M"}
+    </AvatarFallback>
+  </Avatar>
+);

package/src/components/molecules/sources.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../atoms/avatar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+
+export type SourcesProps = Omit<ComponentProps<typeof Collapsible>, "className">;
+
+export const Sources = ({ ...props }: SourcesProps) => (
+  <Collapsible className="not-prose mb-4 text-primary text-xs" {...props} />
+);
+
+export type SourcesTriggerProps = Omit<
+  ComponentProps<typeof CollapsibleTrigger>,
+  "className"
+> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({
+  count,
+  children,
+  ...props
+}: SourcesTriggerProps) => (
+  <CollapsibleTrigger className="flex items-center gap-2" {...props}>
+    {children ?? (
+      <>
+        <p className="font-medium">Used {count} sources</p>
+        <ChevronDownIcon className="h-4 w-4" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = Omit<
+  ComponentProps<typeof CollapsibleContent>,
+  "className"
+>;
+
+export const SourcesContent = ({ ...props }: SourcesContentProps) => (
+  <CollapsibleContent
+    className="mt-3 flex w-fit flex-col gap-2 data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+    {...props}
+  />
+);
+
+export type SourceProps = Omit<ComponentProps<"a">, "className"> & {
+  domain?: string;
+  showAvatar?: boolean;
+};
+
+function extractDomainFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.hostname.replace(/^www\./, "");
+  } catch {
+    return "";
+  }
+}
+
+export const Source = ({
+  href,
+  title,
+  domain,
+  showAvatar = true,
+  children,
+  ...props
+}: SourceProps) => {
+  const sourceDomain = domain || (href ? extractDomainFromUrl(href) : "");
+
+  return (
+    <a
+      className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors"
+      href={href}
+      rel="noreferrer"
+      target="_blank"
+      {...props}
+    >
+      {children ?? (
+        <>
+          {showAvatar && sourceDomain ? (
+            <Avatar size="sm">
+              <AvatarImage
+                src={`https://img.logo.dev/${sourceDomain}?token=pk_BQw8Qo2gQeGk5LGKGGMUxA&format=png&size=24&theme=light`}
+                alt={`${sourceDomain} logo`}
+                onError={(e) => {
+                  (e.target as HTMLImageElement).src =
+                    `https://${sourceDomain}/favicon.ico`;
+                }}
+              />
+              <AvatarFallback>
+                {sourceDomain.split(".")[0]?.charAt(0).toUpperCase() || "?"}
+              </AvatarFallback>
+            </Avatar>
+          ) : (
+            <BookIcon className="h-4 w-4 text-muted-foreground" />
+          )}
+          <div className="flex-1 min-w-0">
+            <span className="block font-medium text-sm truncate">{title}</span>
+            {sourceDomain && (
+              <span className="block text-xs text-muted-foreground truncate">
+                {sourceDomain}
+              </span>
+            )}
+          </div>
+        </>
+      )}
+    </a>
+  );
+};

package/src/components/molecules/suggestion.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { ButtonHTMLAttributes, ComponentProps } from "react";
+
+import { cn } from "../../../lib/utils";
+import { type ButtonProps, buttonVariants } from "../atoms/button";
+
+export type SuggestionsProps = Omit<ComponentProps<"div">, "className">;
+
+export const Suggestions = ({ children, ...props }: SuggestionsProps) => (
+  <div className="w-full overflow-x-auto whitespace-nowrap" {...props}>
+    <div className="flex w-max flex-nowrap items-center gap-2">
+      {children}
+    </div>
+  </div>
+);
+
+export type SuggestionProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "className" | "onClick"
+> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+  variant?: ButtonProps["variant"];
+  size?: ButtonProps["size"];
+};
+
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = () => {
+    onClick?.(suggestion);
+  };
+
+  return (
+    <button
+      className={cn(
+        buttonVariants({ variant, size }),
+        "cursor-pointer rounded-full px-4",
+      )}
+      onClick={handleClick}
+      type="button"
+      {...props}
+    >
+      {children || suggestion}
+    </button>
+  );
+};

package/src/components/molecules/task.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ChevronDownIcon, SearchIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+
+export type TaskItemFileProps = Omit<ComponentProps<"div">, "className">;
+
+export const TaskItemFile = ({ children, ...props }: TaskItemFileProps) => (
+  <div
+    className="inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs"
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type TaskItemProps = Omit<ComponentProps<"div">, "className">;
+
+export const TaskItem = ({ children, ...props }: TaskItemProps) => (
+  <div className="text-muted-foreground text-sm" {...props}>
+    {children}
+  </div>
+);
+
+export type TaskProps = Omit<ComponentProps<typeof Collapsible>, "className">;
+
+export const Task = ({ defaultOpen = true, ...props }: TaskProps) => (
+  <Collapsible
+    className="data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in"
+    defaultOpen={defaultOpen}
+    {...props}
+  />
+);
+
+export type TaskTriggerProps = Omit<
+  ComponentProps<typeof CollapsibleTrigger>,
+  "className"
+> & {
+  title: string;
+};
+
+export const TaskTrigger = ({ children, title, ...props }: TaskTriggerProps) => (
+  <CollapsibleTrigger className="group" {...props}>
+    {children ?? (
+      <div className="flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground">
+        <SearchIcon className="size-4" />
+        <p className="text-sm">{title}</p>
+        <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
+      </div>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type TaskContentProps = Omit<
+  ComponentProps<typeof CollapsibleContent>,
+  "className"
+>;
+
+export const TaskContent = ({ children, ...props }: TaskContentProps) => (
+  <CollapsibleContent
+    className="data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+    {...props}
+  >
+    <div className="mt-4 space-y-2 border-muted border-l-2 pl-4">
+      {children}
+    </div>
+  </CollapsibleContent>
+);

package/src/components/molecules/time-range-input.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { differenceInMinutes, parse } from "date-fns";
+import { useEffect, useState } from "react";
+
+import { Icons } from "../atoms/icons";
+
+export function TimeRangeInput({
+  value,
+  onChange,
+}: {
+  value: { start: string | undefined; stop: string | undefined };
+  onChange: (value: { start: string; stop: string }) => void;
+}) {
+  const [startTime, setStartTime] = useState(value.start || "");
+  const [stopTime, setStopTime] = useState(value.stop || "");
+  const [duration, setDuration] = useState("");
+
+  useEffect(() => {
+    setStartTime(value.start || "");
+    setStopTime(value.stop || "");
+  }, [value]);
+
+  useEffect(() => {
+    if (!startTime || !stopTime) {
+      return;
+    }
+
+    const start = parse(startTime, "HH:mm", new Date());
+    let stop = parse(stopTime, "HH:mm", new Date());
+
+    if (stop < start) {
+      stop = new Date(stop.getTime() + 24 * 60 * 60 * 1000);
+    }
+
+    const diff = differenceInMinutes(stop, start);
+    const hours = Math.floor(diff / 60);
+    const minutes = diff % 60;
+    setDuration(`${hours}h ${minutes}min`);
+  }, [startTime, stopTime]);
+
+  return (
+    <div className="flex items-center w-full border border-border px-4 py-2">
+      <div className="flex items-center space-x-2 flex-1">
+        <Icons.Time size={20} color="#878787" />
+        <input
+          type="time"
+          value={startTime}
+          onChange={(e) => {
+            setStartTime(e.target.value);
+            onChange({ start: e.target.value, stop: stopTime });
+          }}
+          className="bg-transparent focus:outline-none text-sm"
+        />
+      </div>
+      <div className="flex items-center justify-center flex-shrink-0 mx-4">
+        <Icons.ArrowRightAlt size={20} color="#878787" />
+      </div>
+      <div className="flex items-center space-x-2 flex-1 justify-end">
+        <input
+          type="time"
+          value={stopTime}
+          onChange={(e) => {
+            setStopTime(e.target.value);
+            onChange({ start: startTime, stop: e.target.value });
+          }}
+          className="bg-transparent focus:outline-none text-sm"
+        />
+        <span className="text-[#878787] text-sm">{duration}</span>
+      </div>
+    </div>
+  );
+}