@alquimia-ai/ui 1.2.0 → 1.2.1

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

@@ -0,0 +1,148 @@
+"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

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,262 @@
+"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,
+};

package/src/components/molecules/documents/document-selector.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectGroup,
+  SelectValue,
+} from "../../atoms";
+import { AlquimiaDocument, ActionResponse } from '../../../types/type';
+import { ExternalLink } from "lucide-react";
+import { DocumentViewer } from './document-viewer';
+
+type DocumentSelectorProps = {
+  documents: AlquimiaDocument[];
+  getDocument: (id: string) => Promise<ActionResponse<Blob>>
+  logInfoMessage: (info: string, data: any) => void
+}
+export const DocumentSelector = ({ documents, getDocument, logInfoMessage }: DocumentSelectorProps) =>{
+  const [selectedDocName, setSelectedDocName] = useState<string | undefined>(undefined);
+  const [selectedDoc, setSelectedDoc] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+
+  const handleDocumentClick = (doc: any, event: React.MouseEvent) => {
+    event.stopPropagation();
+    setSelectedDoc(doc);
+    logInfoMessage("Selected document", {
+      documentId: doc.id,
+      documentName: doc.name,
+    });
+    setIsModalOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setIsModalOpen(false)
+  }
+
+  return (
+    <div className="w-full md:w-4/6 alq--document-selector">
+      <Select value={selectedDocName} onValueChange={setSelectedDocName}>
+        <SelectTrigger aria-label="Documentos">
+          <SelectValue placeholder="Documentos" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Documents</SelectLabel>
+            {documents.map((doc) => (
+              <div key={doc.id} className="w-full flex relative">
+                <SelectItem className="w-full" key={doc.id} value={doc.id}>
+                  <div className="flex justify-between w-full">
+                    <p className="h-4 truncate mr-5">{doc.name}</p>
+                  </div>
+                </SelectItem>
+                  <div
+                    onClick={(event) => handleDocumentClick(doc, event)}
+                    className="bflex items-center text-gray-400 hover:text-gray-500 absolute right-0 mt-2"
+                    aria-label={`Open ${doc.name}`}
+                  >
+                    <ExternalLink className="h-4 w-4 mx-2" />
+                  </div>
+                </div>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      {selectedDoc && (
+        <DocumentViewer
+          doc={selectedDoc}
+          docName={selectedDocName || ''}
+          isOpen={isModalOpen}
+          onClose={handleDrawerClose}
+          getDocument={getDocument}
+        />
+      )}
+    </div>
+  );
+}