@oppulence/design-system 1.0.4 → 1.0.6

package/src/components/molecules/tool-call-indicator.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Icons } from "../atoms/icons";
+import { TextShimmer } from "../atoms/text-shimmer";
+
+export const toolDisplayConfig = {
+  getBurnRate: {
+    displayText: "Getting Burn Rate Data",
+    icon: Icons.TrendingUp,
+  },
+  web_search: {
+    displayText: "Searching the Web",
+    icon: Icons.Search,
+  },
+} as const;
+
+export type SupportedToolName = keyof typeof toolDisplayConfig;
+
+export interface ToolCallIndicatorProps {
+  toolName: SupportedToolName;
+}
+
+export function ToolCallIndicator({ toolName }: ToolCallIndicatorProps) {
+  const config = toolDisplayConfig[toolName];
+
+  if (!config) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-start mt-3 animate-fade-in">
+      <div className="border px-3 py-1 flex items-center gap-2 w-fit">
+        <div className="flex items-center justify-center size-3.5">
+          <config.icon size={14} />
+        </div>
+        <TextShimmer size="xs" baseColor="#707070" gradientColor="#111111" duration={1}>
+          {config.displayText}
+        </TextShimmer>
+      </div>
+    </div>
+  );
+}

package/src/components/molecules/tool.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import type { ToolUIPart } from "../../../lib/ai";
+import { cn } from "../../../lib/utils";
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { badgeVariants } from "../atoms/badge";
+import { CodeBlock } from "./code-block";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+
+export type ToolProps = Omit<ComponentProps<typeof Collapsible>, "className">;
+
+export const Tool = ({ ...props }: ToolProps) => (
+  <Collapsible className="not-prose mb-4 w-full rounded-md border" {...props} />
+);
+
+export type ToolHeaderProps = {
+  type: ToolUIPart["type"];
+  state: ToolUIPart["state"];
+};
+
+const getStatusBadge = (status: ToolUIPart["state"]) => {
+  const labels = {
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    "output-available": "Completed",
+    "output-error": "Error",
+  } as const;
+
+  const icons = {
+    "input-streaming": <CircleIcon className="size-4" />,
+    "input-available": <ClockIcon className="size-4 animate-pulse" />,
+    "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
+    "output-error": <XCircleIcon className="size-4 text-red-600" />,
+  } as const;
+
+  return (
+    <span className={cn(badgeVariants({ variant: "secondary" }), "gap-1.5 rounded-full text-xs")}>
+      {icons[status]}
+      {labels[status]}
+    </span>
+  );
+};
+
+export const ToolHeader = ({ type, state, ...props }: ToolHeaderProps) => (
+  <CollapsibleTrigger
+    className="flex w-full items-center justify-between gap-4 p-3"
+    {...props}
+  >
+    <div className="flex items-center gap-2">
+      <WrenchIcon className="size-4 text-muted-foreground" />
+      <span className="font-medium text-sm">{type}</span>
+      {getStatusBadge(state)}
+    </div>
+    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+  </CollapsibleTrigger>
+);
+
+export type ToolContentProps = Omit<
+  ComponentProps<typeof CollapsibleContent>,
+  "className"
+>;
+
+export const ToolContent = ({ ...props }: ToolContentProps) => (
+  <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}
+  />
+);
+
+export type ToolInputProps = Omit<ComponentProps<"div">, "className"> & {
+  input: ToolUIPart["input"];
+};
+
+export const ToolInput = ({ input, ...props }: ToolInputProps) => (
+  <div className="space-y-2 overflow-hidden p-4" {...props}>
+    <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+      Parameters
+    </h4>
+    <div className="rounded-md bg-muted/50">
+      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+    </div>
+  </div>
+);
+
+export type ToolOutputProps = Omit<ComponentProps<"div">, "className"> & {
+  output: ReactNode;
+  errorText: ToolUIPart["errorText"];
+};
+
+export const ToolOutput = ({
+  output,
+  errorText,
+  ...props
+}: ToolOutputProps) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2 p-4" {...props}>
+      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+        {errorText ? "Error" : "Result"}
+      </h4>
+      <div
+        className={cn(
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText
+            ? "bg-destructive/10 text-destructive"
+            : "bg-muted/50 text-foreground",
+        )}
+      >
+        {errorText && <div>{errorText}</div>}
+        {output && <div>{output}</div>}
+      </div>
+    </div>
+  );
+};

package/src/components/organisms/combobox-dropdown.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+
+import { Command } from "./command";
+import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command";
+import { Button } from "../atoms/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../molecules/popover";
+
+export type ComboboxItem = {
+  id: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type Props<T> = {
+  placeholder?: React.ReactNode;
+  searchPlaceholder?: string;
+  items: T[];
+  onSelect: (item: T) => void;
+  selectedItem?: T;
+  renderSelectedItem?: (selectedItem: T) => React.ReactNode;
+  renderOnCreate?: (value: string) => React.ReactNode;
+  renderListItem?: (listItem: { isChecked: boolean; item: T }) => React.ReactNode;
+  emptyResults?: React.ReactNode;
+  popoverProps?: Omit<React.ComponentProps<typeof PopoverContent>, "className">;
+  disabled?: boolean;
+  onCreate?: (value: string) => void;
+  headless?: boolean;
+  modal?: boolean;
+};
+
+export function ComboboxDropdown<T extends ComboboxItem>({
+  headless,
+  placeholder,
+  searchPlaceholder,
+  items,
+  onSelect,
+  selectedItem: incomingSelectedItem,
+  renderSelectedItem = (item) => item.label,
+  renderListItem,
+  renderOnCreate,
+  emptyResults,
+  popoverProps,
+  disabled,
+  onCreate,
+  modal = true,
+}: Props<T>) {
+  const [open, setOpen] = React.useState(false);
+  const [internalSelectedItem, setInternalSelectedItem] = React.useState<
+    T | undefined
+  >();
+  const [inputValue, setInputValue] = React.useState("");
+
+  const selectedItem = incomingSelectedItem ?? internalSelectedItem;
+
+  const filteredItems = items.filter((item) =>
+    item.label.toLowerCase().includes(inputValue.toLowerCase()),
+  );
+
+  const showCreate = onCreate && Boolean(inputValue) && !filteredItems.length;
+
+  const Component = (
+    <Command loop shouldFilter={false}>
+      <CommandInput
+        value={inputValue}
+        onValueChange={setInputValue}
+        placeholder={searchPlaceholder ?? "Search item..."}
+      />
+
+      <CommandGroup>
+        <CommandList>
+          {filteredItems.map((item) => {
+            const isChecked = selectedItem?.id === item.id;
+
+            return (
+              <CommandItem
+                disabled={item.disabled}
+                key={item.id}
+                value={item.id}
+                onSelect={(id) => {
+                  const foundItem = items.find((item) => item.id === id);
+
+                  if (!foundItem) {
+                    return;
+                  }
+
+                  onSelect(foundItem);
+                  setInternalSelectedItem(foundItem);
+                  setOpen(false);
+                }}
+              >
+                {renderListItem ? (
+                  renderListItem({ isChecked, item })
+                ) : (
+                  <>
+                    <Check
+                      className={
+                        isChecked ? "mr-2 h-4 w-4 opacity-100" : "mr-2 h-4 w-4 opacity-0"
+                      }
+                    />
+                    {item.label}
+                  </>
+                )}
+              </CommandItem>
+            );
+          })}
+
+          <CommandEmpty>{emptyResults ?? "No item found"}</CommandEmpty>
+
+          {showCreate && (
+            <CommandItem
+              key={inputValue}
+              value={inputValue}
+              onSelect={() => {
+                onCreate(inputValue);
+                setOpen(false);
+                setInputValue("");
+              }}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+              }}
+            >
+              {renderOnCreate ? renderOnCreate(inputValue) : null}
+            </CommandItem>
+          )}
+        </CommandList>
+      </CommandGroup>
+    </Command>
+  );
+
+  if (headless) {
+    return Component;
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={modal}>
+      <PopoverTrigger
+        render={<Button variant="outline" width="full" aria-expanded={open} />}
+        disabled={disabled}
+      >
+        <span className="flex w-full items-center justify-between gap-2">
+          <span className="truncate text-ellipsis">
+            {selectedItem ? (
+              <span className="items-center overflow-hidden whitespace-nowrap text-ellipsis block">
+                {renderSelectedItem
+                  ? renderSelectedItem(selectedItem)
+                  : selectedItem.label}
+              </span>
+            ) : (
+              placeholder ?? "Select item..."
+            )}
+          </span>
+          <ChevronsUpDown className="size-4 opacity-50" />
+        </span>
+      </PopoverTrigger>
+
+      <PopoverContent
+        {...popoverProps}
+        style={{
+          width: "var(--anchor-width)",
+          ...popoverProps?.style,
+        }}
+      >
+        {Component}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/organisms/conversation.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ArrowDownIcon } from "lucide-react";
+import type { ButtonHTMLAttributes, ComponentProps, ReactNode } from "react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+import { cn } from "../../../lib/utils";
+import { buttonVariants } from "../atoms/button";
+
+export type ConversationProps = Omit<
+  ComponentProps<typeof StickToBottom>,
+  "className"
+>;
+
+export const Conversation = ({ ...props }: ConversationProps) => (
+  <StickToBottom
+    className="relative flex-1 overflow-y-auto [&_div::-webkit-scrollbar]:hidden [&_div]:[scrollbar-width:none] [&_div]:[-ms-overflow-style:none]"
+    initial="smooth"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = Omit<
+  ComponentProps<typeof StickToBottom.Content>,
+  "className"
+>;
+
+export const ConversationContent = ({ ...props }: ConversationContentProps) => (
+  <StickToBottom.Content className="p-4" {...props} />
+);
+
+export type ConversationEmptyStateProps = Omit<
+  ComponentProps<"div">,
+  "className"
+> & {
+  title?: string;
+  description?: string;
+  icon?: ReactNode;
+};
+
+export const ConversationEmptyState = ({
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}: ConversationEmptyStateProps) => (
+  <div
+    className="flex size-full flex-col items-center justify-center gap-3 p-8 text-center"
+    {...props}
+  >
+    {children ?? (
+      <>
+        {icon && <div className="text-muted-foreground">{icon}</div>}
+        <div className="space-y-1">
+          <h3 className="font-medium text-sm">{title}</h3>
+          {description && (
+            <p className="text-muted-foreground text-sm">{description}</p>
+          )}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export type ConversationScrollButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "className"
+>;
+
+export const ConversationScrollButton = ({
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return (
+    !isAtBottom && (
+      <button
+        className={cn(
+          buttonVariants({ variant: "outline", size: "icon" }),
+          "absolute bottom-[10.5rem] left-1/2 -translate-x-1/2 rounded-full backdrop-filter backdrop-blur-lg dark:bg-[#1A1A1A]/80 bg-[#F6F6F3]/80",
+        )}
+        onClick={handleScrollToBottom}
+        type="button"
+        {...props}
+      >
+        <ArrowDownIcon className="size-4" />
+      </button>
+    )
+  );
+};

package/src/components/organisms/date-range-picker.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import type { DateRange } from "react-day-picker";
+
+import { ChevronDownIcon } from "lucide-react";
+import { Button } from "../atoms/button";
+import { Calendar } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../molecules/popover";
+
+export type DateRangePickerProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+> & {
+  range: DateRange;
+  onSelect: (range?: DateRange) => void;
+  placeholder: string;
+  disabled?: boolean;
+};
+
+export function DateRangePicker({
+  range,
+  disabled,
+  onSelect,
+  placeholder,
+  ...props
+}: DateRangePickerProps) {
+  return (
+    <div className="grid gap-2" {...props}>
+      <Popover>
+        <PopoverTrigger
+          render={<Button variant="outline" width="full" />}
+          disabled={disabled}
+        >
+          <span className="flex w-full items-center justify-between gap-2 font-medium">
+            <span>{placeholder}</span>
+            <ChevronDownIcon className="size-4" />
+          </span>
+        </PopoverTrigger>
+        <PopoverContent align="end" sideOffset={8}>
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={range?.from}
+            selected={range}
+            onSelect={onSelect}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/src/components/organisms/editor/extentions/bubble-menu/bubble-item.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { BubbleMenuButton } from "./bubble-menu-button";
+
+interface BubbleItemProps {
+  editor: Editor;
+  action: () => void;
+  isActive: boolean;
+  children: React.ReactNode;
+}
+
+export function BubbleMenuItem({
+  editor,
+  action,
+  isActive,
+  children,
+}: BubbleItemProps) {
+  return (
+    <BubbleMenuButton
+      action={() => {
+        editor.chain().focus();
+        action();
+      }}
+      isActive={isActive}
+    >
+      {children}
+    </BubbleMenuButton>
+  );
+}

package/src/components/organisms/editor/extentions/bubble-menu/bubble-menu-button.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+interface BubbleMenuButtonProps {
+  action: () => void;
+  isActive: boolean;
+  children: React.ReactNode;
+}
+
+export function BubbleMenuButton({
+  action,
+  isActive,
+  children,
+}: BubbleMenuButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={action}
+      className={
+        isActive
+          ? "px-2.5 py-1.5 text-[11px] transition-colors bg-white dark:bg-stone-900 text-primary"
+          : "px-2.5 py-1.5 text-[11px] transition-colors bg-transparent hover:bg-muted"
+      }
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/organisms/editor/extentions/bubble-menu/index.tsx

@@ -0,0 +1,63 @@
+import { type Editor, BubbleMenu as TiptapBubbleMenu } from "@tiptap/react";
+import { useState } from "react";
+import {
+  MdOutlineFormatBold,
+  MdOutlineFormatItalic,
+  MdOutlineFormatStrikethrough,
+} from "react-icons/md";
+import type { Props as TippyOptions } from "tippy.js";
+import { BubbleMenuItem } from "./bubble-item";
+import { LinkItem } from "./link-item";
+
+export function BubbleMenu({
+  editor,
+  tippyOptions,
+}: {
+  editor: Editor;
+  tippyOptions?: TippyOptions;
+}) {
+  const [openLink, setOpenLink] = useState(false);
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div>
+      <TiptapBubbleMenu editor={editor} tippyOptions={tippyOptions}>
+        <div className="flex w-fit max-w-[90vw] overflow-hidden rounded-full border border-border bg-background text-mono font-regular">
+          <>
+            <BubbleMenuItem
+              editor={editor}
+              action={() => editor.chain().focus().toggleBold().run()}
+              isActive={editor.isActive("bold")}
+            >
+              <MdOutlineFormatBold className="size-4" />
+              <span className="sr-only">Bold</span>
+            </BubbleMenuItem>
+
+            <BubbleMenuItem
+              editor={editor}
+              action={() => editor.chain().focus().toggleItalic().run()}
+              isActive={editor.isActive("italic")}
+            >
+              <MdOutlineFormatItalic className="size-4" />
+              <span className="sr-only">Italic</span>
+            </BubbleMenuItem>
+
+            <BubbleMenuItem
+              editor={editor}
+              action={() => editor.chain().focus().toggleStrike().run()}
+              isActive={editor.isActive("strike")}
+            >
+              <MdOutlineFormatStrikethrough className="size-4" />
+              <span className="sr-only">Strike</span>
+            </BubbleMenuItem>
+
+            <LinkItem editor={editor} open={openLink} setOpen={setOpenLink} />
+          </>
+        </div>
+      </TiptapBubbleMenu>
+    </div>
+  );
+}