@alquimia-ai/ui 1.2.1 → 1.2.4

package/src/components/molecules/alert-dialog.tsx

@@ -1,141 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "../atoms/ui/button";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

package/src/components/molecules/assistant-button.tsx

@@ -1,148 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useState, useEffect } from "react";
-import { LucideIcon } from "lucide-react";
-import { Button } from "../atoms";
-import { cn } from "../../lib/utils";
-
-interface Suggestion {
-  label: string;
-  icon: LucideIcon;
-  action: () => void;
-}
-
-interface AssistantSuggestionsProps {
-  suggestions: Suggestion[];
-  className?: string;
-  showSuggestions: boolean;
-}
-
-const AssistantSuggestions = React.forwardRef<
-  HTMLDivElement,
-  AssistantSuggestionsProps
->(({ suggestions, showSuggestions, className }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "absolute bottom-[calc(100%+0.5rem)] right-0 pb-2 mb-4 alq--assistant-suggestions-container",
-        "transition-all duration-300",
-        showSuggestions
-          ? "opacity-100 translate-y-0"
-          : "opacity-0 translate-y-4",
-        className
-      )}
-    >
-      <div className="rounded-lg p-2 pr-0 w-64">
-        {suggestions.map((suggestion, index) => (
-          <button
-            key={index}
-            onClick={() => suggestion.action?.()}
-            style={{
-              transitionDelay: showSuggestions ? `${index * 50}ms` : "0ms",
-            }}
-            className={cn(
-              "bg-background flex items-center gap-2 border p-2 pr-4 my-2 rounded-full ml-auto",
-              "text-primary hover:bg-secondary",
-              "transition-all duration-100",
-              "origin-bottom w-fit",
-              "alq--assistant-suggestion",
-              showSuggestions
-                ? "opacity-100 translate-y-0"
-                : "opacity-0 translate-y-4"
-            )}
-          >
-            <suggestion.icon className="w-5 h-5 text-primary" />
-            <span className="text-xs whitespace-nowrap font-normal">
-              {suggestion.label}
-            </span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-});
-
-AssistantSuggestions.displayName = "Suggestions";
-
-interface AssistantButtonProps {
-  icon: LucideIcon;
-  clickAction: () => void;
-  className?: string;
-  suggestions?: Suggestion[];
-}
-
-export const AssistantButton = React.forwardRef<
-  HTMLDivElement,
-  AssistantButtonProps
->(
-  (
-    {
-      icon: Icon,
-      clickAction,
-      className,
-      suggestions = [],
-    },
-    ref
-  ) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-
-    const handleMouseEnter = () => {
-      setIsVisible(true);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setShowSuggestions(true);
-        });
-      });
-    };
-
-    const handleMouseLeave = () => {
-      setShowSuggestions(false);
-      setTimeout(() => setIsVisible(false), 300);
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "fixed bottom-8 right-4 z-50",
-          "alq--assistant-button-container",
-          className
-        )}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <div className="relative group">
-          {isVisible && suggestions.length > 0 && (
-            <AssistantSuggestions
-              suggestions={suggestions}
-              showSuggestions={showSuggestions}
-            />
-          )}
-          <Button
-            variant="outline"
-            size="sm"
-            className={cn(
-              "fixed hover:bg-opacity-70 transition-all duration-300",
-              "bottom-4 h-12 w-12 right-4 z-50 rounded-full p-2",
-              "shadow-md",
-              "hover:shadow-lg",
-              showSuggestions ? "scale-110" : "hover:scale-105",
-              "alq--assistant-button"
-            )}
-            onClick={clickAction}
-          >
-            <Icon
-              style={{ width: "22px", height: "22px" }}
-              className="text-primary"
-            />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-);
-
-AssistantButton.displayName = "AssistantButton";

package/src/components/molecules/call-out.tsx

@@ -1,163 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { RichText } from "../atoms";
-import { Message } from "ai";
-import { useTextStreaming } from "../hooks/use-text-streaming";
-
-export interface CallOutMessage {
-  id: string;
-  role: "user" | "assistant";
-  content: string;
-  timestamp: Date;
-}
-
-interface CallOutActionProps {
-  label: string;
-  icon: React.ReactNode;
-  onClick: (message?: Message) => Promise<void>;
-}
-
-export interface CallOutProps extends React.HTMLAttributes<HTMLDivElement> {
-  message?: Message;
-}
-
-const CallOut = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CallOutProps
->(({ className, children, role, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn("alq--callout-box", className)}
-      data-role={role}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-const CallOutDate = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "alq--callout-date",
-        "text-sm text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-const CallOutActions = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    actions: CallOutActionProps[];
-    role: "user" | "assistant";
-    message?: Message;
-  }
->(({ className, actions, role, message, ...props }, ref) => {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isClicked, setIsClicked] = React.useState(false);
-
-  if (role === "user") {
-    return null;
-  }
-
-  return (
-    <div ref={ref} className={cn("alq--callout-actions", className)} {...props}>
-      {actions.map((action) => (
-        <button
-          key={action.label}
-          className={cn(
-            "alq--callout-action",
-            {
-              "alq--callout-animate-action": isLoading,
-            },
-            {
-              "alq--callout-clicked-action": isClicked,
-            }
-          )}
-          type="button"
-          title={action.label}
-          onClick={() => {
-            setIsLoading(true);
-            action.onClick(message).then(() => {
-              setIsLoading(false);
-              setIsClicked(true);
-            });
-          }}
-        >
-          <span
-            className={cn("alq-action-icon-wrapper", {
-              "alq--callout-animate-action": isLoading,
-            })}
-          >
-            {action.icon}
-          </span>
-          <label>{action.label}</label>
-        </button>
-      ))}
-    </div>
-  );
-});
-
-const CallOutResponse = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    role: Message["role"];
-    additionalInfo?: string;
-    isStreaming?: boolean;
-    handleIsTextStreaming?: (isStreaming: boolean) => void;
-  }
->(
-  (
-    { className, children, role, additionalInfo, isStreaming, handleIsTextStreaming, ...props },
-    ref
-  ) => {
-    const content = String(children || "");
-    const shouldStream = role === "assistant" && isStreaming;
-    const displayedContent = useTextStreaming(content, shouldStream ?? false, handleIsTextStreaming);
-  
-    return (
-      <div
-        ref={ref}
-        data-role={role}
-        className={cn(
-          "alq--callout-response",
-          "max-w-none",
-          "text-foreground",
-          className
-        )}
-        {...props}
-      >
-        <RichText content={displayedContent} />
-        {additionalInfo && (
-          <div
-            className={cn(
-              "alq--callout-response-additional-info",
-              "mt-2 text-sm text-muted-foreground",
-              "border-t border-border pt-2"
-            )}
-          >
-            {additionalInfo}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-CallOut.displayName = "CallOut";
-CallOutDate.displayName = "CallOutDate";
-CallOutActions.displayName = "CallOutActions";
-CallOutResponse.displayName = "CallOutResponse";
-export { CallOut, CallOutDate, CallOutResponse, CallOutActions };

package/src/components/molecules/carousel.tsx

@@ -1,262 +0,0 @@
-"use client";
-
-import * as React from "react";
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../../components/atoms/ui/button";
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return;
-      }
-
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext]
-    );
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return;
-      }
-
-      setApi(api);
-    }, [api, setApi]);
-
-    React.useEffect(() => {
-      if (!api) {
-        return;
-      }
-
-      onSelect(api);
-      api.on("reInit", onSelect);
-      api.on("select", onSelect);
-
-      return () => {
-        api?.off("select", onSelect);
-      };
-    }, [api, onSelect]);
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  }
-);
-Carousel.displayName = "Carousel";
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  );
-});
-CarouselContent.displayName = "CarouselContent";
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  );
-});
-CarouselItem.displayName = "CarouselItem";
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-});
-CarouselPrevious.displayName = "CarouselPrevious";
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-});
-CarouselNext.displayName = "CarouselNext";
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};