@alquimia-ai/ui 1.2.1 → 1.2.4

package/src/components/molecules/sidebar.tsx

@@ -1,107 +0,0 @@
-import * as React from "react";
-import { LucideIcon } from "lucide-react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-import { ScrollArea, Button } from "../atoms";
-
-const sidebarVariants = cva(
-  "flex flex-col border-r",
-  {
-    variants: {
-      size: {
-        sm: "w-48",
-        default: "w-64",
-        lg: "w-72"
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-);
-
-export interface SidebarItem {
-  name: string;
-  icon?: LucideIcon;
-  disabled?: boolean;
-  isLink?: boolean;
-  link?: string;
-}
-
-type SidebarBaseProps = {
-  items: SidebarItem[];
-  selectedSection?: SidebarItem;
-  onSelect?: (item: SidebarItem) => void;
-  footerContent?: React.ReactNode;
-  selectedVariant?: "default" | "secondary" | "ghost" | "link";
-  defaultVariant?: "default" | "secondary" | "ghost" | "link";
-  buttonClassName?: string;
-}
-
-export interface SidebarProps 
-  extends SidebarBaseProps,
-    Omit<React.HTMLAttributes<HTMLDivElement>, keyof SidebarBaseProps>,
-    VariantProps<typeof sidebarVariants> {}
-
-export const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("p-4", className)}
-    {...props}
-  >
-    {children}
-  </div>
-));
-SidebarFooter.displayName = "SidebarFooter";
-
-
-export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
-  ({ 
-    className, 
-    items, 
-    selectedSection, 
-    onSelect, 
-    footerContent,
-    size = "default",
-    selectedVariant = "secondary",
-    defaultVariant = "ghost",
-    buttonClassName,
-    ...props 
-  }, ref) => {
-    return (
-      <div className={cn(className, "alq--navigation-sidebar h-full")} ref={ref} {...props}>
-        <aside className={cn(sidebarVariants({ size }), "h-full")}>
-          <ScrollArea className="flex-grow justify-between">
-            <div className="flex flex-col gap-2 p-4">
-              {items.map((item) => (
-                <Button
-                  key={item.name}
-                  variant={selectedSection?.name === item.name ? selectedVariant : defaultVariant}
-                  className={cn("justify-start", buttonClassName)}
-                  disabled={item.disabled}
-                  onClick={() => {
-                    if (onSelect) {
-                      onSelect(item);
-                    }
-                  }}
-                >
-                  {item.icon && <item.icon className="mr-2 h-4 w-4" />}
-                  {item.name}
-                </Button>
-              ))}
-            </div>
-          </ScrollArea>
-          {footerContent && (
-            <SidebarFooter>
-              {footerContent}
-            </SidebarFooter>
-          )}
-        </aside>
-      </div>
-    );
-  }
-);

package/src/components/molecules/sonner.tsx

@@ -1,30 +0,0 @@
-"use client";
-import * as React from "react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-export { Toaster as SonnerToaster };

package/src/components/molecules/viewers/index.ts

@@ -1,2 +0,0 @@
-export * from "./pdf-viewer";
-export * from "./plain-text-viewer";

package/src/components/molecules/viewers/pdf-viewer.tsx

@@ -1,138 +0,0 @@
-'use client'
-
-import React, { useState, useCallback, useEffect } from 'react'
-import { Button, Loader } from '../../atoms';
-import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut, Download } from 'lucide-react'
-import useResizeObserver from '../../hooks/use-resize-observer';
-import { pdfjs, Document, Page } from 'react-pdf';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
-
-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
-
-const options = {
-  cMapUrl: '/cmaps/',
-  standardFontDataUrl: '/standard_fonts/',
-  cMapPacked: true,
-};
-
-const resizeObserverOptions = {};
-
-type PdfViewerProps = {
-    doc: Blob | null;
-    loading?: boolean;
-    docId: string;
-}
-
-export default function PdfViewer({ doc, docId }: PdfViewerProps) {
-  const [numPages, setNumPages] = useState<number>(0);
-  const [pageNumber, setPageNumber] = useState<number>(1);
-  const [scale, setScale] = useState<number>(1);
-  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
-  const [containerWidth, setContainerWidth] = useState<number>();
-
-  const onResize = useCallback<ResizeObserverCallback>((entries) => {
-    const [entry] = entries;
-    if (entry) {
-      setContainerWidth(entry.contentRect.width);
-    }
-  }, []);
-
-  useResizeObserver(containerRef, resizeObserverOptions, onResize);
-
-  function onDocumentLoadSuccess({ numPages: nextNumPages }: pdfjs.PDFDocumentProxy): void {
-    setNumPages(nextNumPages);
-  }
-
-  const resetDocument = () => {
-    setPageNumber(1);
-    setScale(1);
-  }
-
-  useEffect(() => {
-    resetDocument()
-  }, []);
-
-
-  const handlePrevPage = () => setPageNumber((prev) => Math.max(prev - 1, 1));
-  const handleNextPage = () => setPageNumber((prev) => Math.min(prev + 1, numPages));
-  const handleZoomIn = () => setScale((prev) => Math.min(prev + 0.1, 2));
-  const handleZoomOut = () => setScale((prev) => Math.max(prev - 0.1, 0.5));
-
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key === 'ArrowLeft') {
-      handlePrevPage();
-    } else if (e.key === 'ArrowRight') {
-      handleNextPage();
-    }
-  }, [handlePrevPage, handleNextPage]);
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleKeyDown]);
-
-
-  const handleDownloadFile = () => {
-    const docUrl = doc && URL.createObjectURL(doc);
-    const a = document.createElement('a');
-    a.href = docUrl || '';
-    a.download = docId;
-    a.click();
-    URL.revokeObjectURL(docUrl || '');
-  };
-
-  return (
-    <>
-      <div className="flex justify-between items-center p-4 border-b border-border">
-        <div>
-          <Button 
-            onClick={handlePrevPage} 
-            disabled={pageNumber <= 1}
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </Button>
-          <span className="mx-2">
-            Page {pageNumber} of {numPages}
-          </span>
-          <Button 
-            onClick={handleNextPage} 
-            disabled={pageNumber >= numPages}
-          >
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-        {/* <div>
-          <Button onClick={handleDownloadFile}>
-            <Download className="h-4 w-4" />
-          </Button>
-        </div> */}
-        <div>
-          <Button onClick={handleZoomOut}>
-            <ZoomOut className="h-4 w-4" />
-          </Button>
-          <span className="mx-2">{(scale * 100).toFixed(0)}%</span>
-          <Button onClick={handleZoomIn}>
-            <ZoomIn className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-      <div ref={setContainerRef} className="overflow-auto">
-        <Document
-          file={doc}
-          // file={`/docs/${docId}`}
-          onLoadSuccess={onDocumentLoadSuccess}
-          options={options}
-          loading={<Loader size="xl" colorVariant="destructive" />}
-        >
-          <Page
-            pageNumber={pageNumber}
-            scale={scale}
-            width={containerWidth}
-            className="w-full"
-          />
-        </Document>
-      </div>
-    </>
-  );
-}

package/src/components/molecules/viewers/plain-text-viewer.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { Loader, RichText } from "../../atoms";
-
-type PlainTextViewerProps = {
-  doc: Blob | null;
-  docId?: string;
-};
-
-export default function PlainTextViewer({ doc }: PlainTextViewerProps) {
-  const [content, setContent] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function parseDocument() {
-      try {
-        if (doc && doc.type === "text/plain") {
-          const text = await doc.text();
-          setContent(text);
-        }
-      } catch (err) {
-        console.error("Error parsing Document:", err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    parseDocument();
-  }, [doc]);
-
-  return (
-    <>
-      <div className="relative w-full h-full max-h-[80vh] overflow-y-auto p-8 alq--prose">
-        {loading && <Loader />}
-        {!loading && <RichText content={content || ""} />}
-      </div>
-    </>
-  );
-}

package/src/components/organisms/assistant.tsx

@@ -1,271 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { useEffect } from "react";
-import { AlquimiaSDK } from "@alquimia-ai/tools/sdk";
-import { Typography } from "../atoms";
-import { CallOut, CallOutResponse, CallOutActions } from "../molecules";
-import { ThinkIndicator } from "../atoms";
-import { cn } from "../../lib/utils";
-import { Message } from "ai";
-import { Send } from "lucide-react";
-
-interface AssistantProps extends React.HTMLAttributes<HTMLDivElement> {
-  sdk: AlquimiaSDK;
-  title?: string;
-  description?: string;
-}
-
-const Assistant = React.forwardRef<HTMLDivElement, AssistantProps>(
-  ({ className, sdk, title, description, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn("flex flex-col h-full bg-background text-foreground", className)}
-        {...props}
-      >
-        {(title || description) && (
-          <AssistantHeader>
-            {title && <AssistantTitle title={title} />}
-            {description && <AssistantDescription description={description} />}
-          </AssistantHeader>
-        )}
-        {children}
-      </div>
-    );
-  }
-);
-Assistant.displayName = "Assistant";
-
-interface AssistantTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  title: string;
-}
-
-const AssistantTitle = React.forwardRef<HTMLHeadingElement, AssistantTitleProps>(
-  ({ className, title, ...props }, ref) => (
-    <div ref={ref} className={cn("text-foreground", className)} {...props}>
-      <Typography typeStyle="heading1" as="h1">
-        {title}
-      </Typography>
-    </div>
-  )
-);
-AssistantTitle.displayName = "AssistantTitle";
-
-interface AssistantDescriptionProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
-  description: string;
-}
-
-const AssistantDescription = React.forwardRef<
-  HTMLParagraphElement,
-  AssistantDescriptionProps
->(({ className, description, ...props }, ref) => (
-  <div ref={ref} className={cn("text-foreground", className)} {...props}>
-    <Typography typeStyle="display" as="p">
-      {description}
-    </Typography>
-  </div>
-));
-AssistantDescription.displayName = "AssistantDescription";
-
-interface AssistantHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const AssistantHeader = React.forwardRef<HTMLDivElement, AssistantHeaderProps>(
-  ({ className, children, ...props }, ref) => (
-    <div 
-      ref={ref} 
-      className={cn("bg-background text-foreground", className)} 
-      {...props}
-    >
-      {children}
-    </div>
-  )
-);
-AssistantHeader.displayName = "AssistantHeader";
-
-interface MessageAction {
-  label: string;
-  icon: React.ReactNode;
-  onClick: (message?: Message) => Promise<void>;
-}
-
-interface AssistantMessageAreaProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  messages: (Message & {
-    error_code?: string;
-    created_at?: string;
-    error_detail?: string;
-    additionalInfo?: string;
-    loading?: boolean;
-  })[];
-  actions?: MessageAction[];
-  messagesEndRef: any;
-  thinkIndicator?: React.ReactNode;
-  isMessageStreaming?: boolean;
-  streamingMessageId: string | null;
-  handleIsTextStreaming?: (isStreaming: boolean) => void;
-}
-
-const AssistantMessageArea = React.forwardRef<
-  HTMLDivElement,
-  AssistantMessageAreaProps
->(
-  (
-    {
-      className,
-      messages,
-      messagesEndRef,
-      actions,
-      streamingMessageId,
-      thinkIndicator,
-      handleIsTextStreaming,
-      ...props
-    },
-    ref
-  ) => {
-    useEffect(() => {
-      messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
-    }, []);
-    return(
-    <div
-      ref={ref}
-      className={cn("p-6 overflow-y-auto flex-grow bg-background", className)}
-      {...props}
-    >
-      {messages.map((message) => (
-        <div key={message.id}>
-          <CallOut
-            key={message.id}
-            role={message.role as "user" | "assistant"}
-            message={message}
-          >
-            {message.created_at && (
-              <div className="text-xs text-muted-foreground/80 pb-1">
-                {new Date(Number(message.created_at)).toLocaleString("es-ES", {
-                  day: "2-digit",
-                  month: "2-digit",
-                  year: "numeric",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  second: "2-digit",
-                  hour12: false,
-                })}
-              </div>
-            )}
-            {message.loading && (
-              <div>
-                {thinkIndicator ?? <ThinkIndicator />}
-              </div>
-            )}
-            {message.error_code && (
-              <CallOutResponse
-                role="assistant"
-                data-error-code={message.error_code}
-              >
-                We have an internal error, please try again later.
-              </CallOutResponse>
-            )}
-            {message.content && (
-                <CallOutResponse
-                role={message.role}
-                isStreaming={streamingMessageId === message.id}
-                handleIsTextStreaming={handleIsTextStreaming}
-                additionalInfo={
-                  streamingMessageId !== message.id
-                    ? message?.additionalInfo
-                    : undefined
-                }
-              >
-                {message.content}
-              </CallOutResponse>
-            )}
-            {actions && streamingMessageId !== message.id &&
-              <CallOutActions
-                key={message.id}
-                actions={actions}
-                message={message}
-                role={message.role as "user" | "assistant"}
-              />
-            }
-          </CallOut>
-        </div>
-      ))}
-      <div ref={messagesEndRef} />
-      </div>
-    );
-  }
-);
-AssistantMessageArea.displayName = "AssistantMessageArea";
-
-interface AssistantInputProps
-  extends React.FormHTMLAttributes<HTMLFormElement> {
-  sendMessageFunc: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
-  isButtonDisabled: boolean;
-  input: string;
-  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  isMessageStreaming: boolean;
-}
-
-const AssistantInput = React.forwardRef<HTMLFormElement, AssistantInputProps>(
-  (
-    {
-      className,
-      sendMessageFunc,
-      isButtonDisabled,
-      input,
-      handleInputChange,
-      isMessageStreaming,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <form
-        onSubmit={sendMessageFunc}
-        className={cn("flex items-center space-x-4", className)}
-        ref={ref}
-        {...props}
-      >
-        <input
-          type="text"
-          disabled={isButtonDisabled}
-          value={input}
-          onChange={handleInputChange}
-          placeholder={
-            isMessageStreaming ? "Procesando..." : "Escribe tu mensaje aquí..."
-          }
-          className={cn(
-            "flex-1 text-sm p-3 rounded-lg focus:outline-none w-full",
-            "border border-input bg-background text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus:ring-2 focus:ring-ring",
-            "disabled:opacity-50 disabled:cursor-not-allowed"
-          )}
-        />
-        <button
-          type="submit"
-          disabled={isButtonDisabled}
-          className={cn(
-            "w-10 h-10 rounded-full flex items-center justify-center alq--assistant-button-send",
-            isButtonDisabled
-              ? "bg-muted text-muted-foreground"
-              : "bg-primary text-primary-foreground hover:bg-primary/90"
-          )}
-        >
-          <Send className="w-5 h-5" />
-        </button>
-      </form>
-    );
-  }
-);
-AssistantInput.displayName = "AssistantInput";
-
-export {
-  Assistant,
-  AssistantTitle,
-  AssistantDescription,
-  AssistantHeader,
-  AssistantMessageArea,
-  AssistantInput,
-};

package/src/components/organisms/index.ts

@@ -1,6 +0,0 @@
-export { Whisper } from "./whisper";
-export { SpeechToText } from "./speechToText";
-export { Assistant } from "./assistant";
-export { RatingDialog } from "./rating-dialog";
-export { AssistantMessageArea } from "./assistant";
-export { AssistantInput } from "./assistant";

package/src/components/organisms/rating-dialog.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import { Message } from "ai";
-
-import { RatingData } from "../../types/type";
-import { useRatings } from "@alquimia-ai/tools/hooks";
-import { useToast } from "../hooks";
-import { RatingThumbs, RatingStars, RatingComment } from "../molecules";
-import {
-  Dialog,
-  DialogDescription,
-  DialogTitle,
-  DialogContent,
-  DialogHeader,
-  Typography,
-  Button,
-  ToastAction,
-} from "../atoms";
-
-interface RatingDialogProps {
-  topicId: string;
-  assistantId: string;
-  sendRating: (ratingData: RatingData) => Promise<any>;
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  setHasRatedTopic: (hasRated: boolean) => void;
-  onError?: (componentName: string, error: Error) => void;
-}
-
-export function RatingDialog({
-  sendRating,
-  topicId,
-  assistantId,
-  isOpen,
-  onOpenChange,
-  setHasRatedTopic,
-}: RatingDialogProps) {
-  const { toast } = useToast();
-  const { handleRate, ratingStars, ratingThumbs, ratingComment, isLoading } =
-    useRatings({ assistantId, sendRating, topicId });
-
-  const onHandleRateSuccess = (success: boolean, err?: string) => {
-    setTimeout(() => onOpenChange(false), 1000);
-    success
-      ? setHasRatedTopic(true)
-      : toast({
-          title: "Error",
-          description: `Hubo un error al enviar la calificación`,
-          action: (
-            <ToastAction altText="Goto schedule to undo">Cerrar</ToastAction>
-          ),
-        });
-  };
-
-  const handleCancelRate = () => {
-    setHasRatedTopic(true);
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Calificá esta conversación</DialogTitle>
-          <DialogDescription>
-            Por favor, compartí tu opinión sobre el asistente.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-row justify-center gap-4 py-4">
-          <RatingStars
-            currentRating={ratingStars}
-            onRate={(newRating) =>
-              handleRate("score", newRating, onHandleRateSuccess)
-            }
-            isLoading={isLoading}
-            className="p-2 rounded"
-          />
-          <RatingThumbs
-            currentRating={ratingComment}
-            onRate={(newRating) =>
-              handleRate("description", newRating, onHandleRateSuccess)
-            }
-            direction="row"
-            isLoading={isLoading}
-          />
-          <RatingComment
-            currentRating={ratingComment}
-            onRate={(newRating) =>
-              handleRate("description", newRating, onHandleRateSuccess)
-            }
-            isLoading={isLoading}
-          />
-        </div>
-        <div className="flex flex-row justify-center gap-4">
-          <Button onClick={handleCancelRate} variant="secondary">
-            <Typography as="p" typeStyle="tiny">
-              No, gracias.
-            </Typography>
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}