@alquimia-ai/ui 1.2.0 → 1.2.1

package/src/components/molecules/sonner.tsx

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

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

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

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

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

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

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

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

package/src/components/organisms/speechToText.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect } from "react";
+import { cn, blobToBase64 } from "../../lib/utils";
+interface SpeechToTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  RecordAudioIcon: React.ReactElement;
+  IdleAudioIcon: React.ReactElement;
+  speechToText: (audio: string) => Promise<string>;
+  handleReplaceInput: (text: string) => void;
+  setIsAudioRecording: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function SpeechToText({
+  className,
+  speechToText,
+  RecordAudioIcon,
+  IdleAudioIcon,
+  handleReplaceInput,
+  setIsAudioRecording,
+  ...props
+}: SpeechToTextProps) {
+  const [isRecording, setIsRecording] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+
+  const startRecording = async () => {
+    setIsRecording(true);
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const recorder = new MediaRecorder(stream);
+    setMediaRecorder(recorder);
+
+    recorder.ondataavailable = (event) => {
+      setAudioBlob(event.data);
+    };
+
+    recorder.start();
+  };
+
+  const stopRecording = () => {
+    setIsRecording(false);
+    mediaRecorder?.stop();
+    mediaRecorder?.stream.getTracks().forEach(track => track.stop());
+  };
+
+  const handleSpeechToText = async () => {
+    if (!audioBlob) return;
+
+    const audioBase64 = await blobToBase64(audioBlob);
+    try {
+      setIsLoading(true)
+      const transcription = await speechToText(audioBase64);
+      if (transcription) {
+        handleReplaceInput(transcription)
+        setIsLoading(false)
+      }
+    } catch (error) {
+      console.error('Error transcribing audio:', error);
+      setIsLoading(false)
+    } finally {
+      setAudioBlob(null);
+    }
+  };
+
+  useEffect(() => {
+    if (!isRecording && audioBlob) {
+      handleSpeechToText();
+    }
+  }, [isRecording, audioBlob]);
+
+  useEffect(() => {
+    isLoading || isRecording ? setIsAudioRecording(true) : setIsAudioRecording(false);
+  }, [isRecording, isLoading]);
+
+  const handleRecordButtonClick = () => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  };
+
+  const recordIcons = isRecording ? RecordAudioIcon : IdleAudioIcon
+
+  return (
+    <div className={cn(className)} {...props}>
+      <button disabled={isLoading} type="button" onClick={handleRecordButtonClick}>
+        {recordIcons}
+      </button>
+    </div>
+  );
+}
+
+export { SpeechToText };