@alquimia-ai/ui 1.2.1 → 1.2.4

package/src/components/organisms/speechToText.tsx

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

package/src/components/organisms/whisper.tsx

@@ -1,106 +0,0 @@
-import { useState, useEffect } from "react";
-import { cn } from "../../lib/utils";
-import {
-  AudioLinesIcon,
-  PlayCircleIcon,
-  LoaderPinwheelIcon,
-} from "lucide-react";
-import { Message } from "ai";
-import { parseTextToSpeech } from "../../lib/utils";
-
-interface WhisperProps extends React.HTMLAttributes<HTMLDivElement> {
-  message: Message;
-  isMessageStreaming: boolean;
-  textToSpeech: (content: string) => Promise<Blob>;
-}
-
-function Whisper({
-  className,
-  message,
-  isMessageStreaming,
-  textToSpeech,
-}: WhisperProps) {
-  const [audioUrl, setAudioUrl] = useState<HTMLAudioElement | null>(null);
-  const [isPlaying, setIsPlaying] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  const content = message.content;
-
-  useEffect(() => {
-    if (audioUrl) {
-      const handlePlaying = () => setIsPlaying(true);
-      const handlePause = () => setIsPlaying(false);
-      const handleEnded = () => setIsPlaying(false);
-
-      audioUrl.addEventListener("playing", handlePlaying);
-      audioUrl.addEventListener("pause", handlePause);
-      audioUrl.addEventListener("ended", handleEnded);
-
-      return () => {
-        audioUrl.removeEventListener("playing", handlePlaying);
-        audioUrl.removeEventListener("pause", handlePause);
-        audioUrl.removeEventListener("ended", handleEnded);
-      };
-    }
-  }, [audioUrl]);
-
-  const resetAudio = () => {
-    audioUrl && (audioUrl.currentTime = 0);
-    audioUrl?.pause();
-  };
-
-  const handleAudioPlay = () => (isPlaying ? resetAudio() : audioUrl?.play());
-
-  const handleTextToSpeech = async (content: string) => {
-    if (!audioUrl) {
-      setIsLoading(true);
-      const filteredContent = parseTextToSpeech(content);
-      const audioFile = await textToSpeech(filteredContent);
-
-      if (audioFile) {
-        const url = URL.createObjectURL(audioFile);
-        const audio = new Audio(url);
-
-        setIsLoading(false);
-        audio.play();
-        setAudioUrl(audio);
-      }
-    } else {
-      setIsLoading(false);
-      handleAudioPlay();
-    }
-  };
-
-  return (
-    <div className={cn(className)}>
-      {isMessageStreaming && <div className="p-2 w-[24px] h-[24px]"></div>}
-      {!isMessageStreaming && (
-        <div onClick={() => handleTextToSpeech(content)}>
-          {isPlaying && (
-            <button className="p-2 items-center justify-center">
-              <AudioLinesIcon size={20} />
-            </button>
-          )}
-
-          {isLoading && (
-            <button className="p-2 items-center justify-center">
-              {" "}
-              <LoaderPinwheelIcon size={20} className="circular-animation" />
-            </button>
-          )}
-
-          {!isLoading && !isPlaying && (
-            <button
-              disabled={isLoading}
-              className="p-2 items-center justify-center"
-            >
-              <PlayCircleIcon size={20} />
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export { Whisper };

package/src/components/templates/cards/index.ts

@@ -1,2 +0,0 @@
-export * from "./with-image-heading-description";
-export * from "./with-image-heading-description-avatar";

package/src/components/templates/cards/with-image-heading-description-avatar.tsx

@@ -1,94 +0,0 @@
-import { cn } from "../../../lib/utils";
-import {
-  Avatar,
-  AvatarImage,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Typography,
-} from "../../atoms";
-
-interface CardWithImageHeadingDescriptionAvatarProps {
-  orientation: "vertical" | "horizontal";
-  showBorder?: boolean;
-  image: React.ReactNode;
-  heading: React.ReactNode;
-  description: React.ReactNode;
-  avatarImage: string;
-  userName: string;
-  email: string;
-}
-
-const AvatarInfo = (props: CardWithImageHeadingDescriptionAvatarProps) => {
-  const { userName, email, avatarImage } = props;
-  return (
-    <div className="flex space-x-2 items-center">
-      <Avatar className="w-16 h-16">
-        <AvatarImage src={avatarImage} />
-      </Avatar>
-      <div>
-        <Typography typeStyle="small" className="font-semibold">
-          {userName}
-        </Typography>
-        <Typography typeStyle="tiny" className="text-font-weak-color">
-          {email}
-        </Typography>
-      </div>
-    </div>
-  );
-};
-
-const CardWithImageHeadingDescriptionAvatarVertical = (
-  props: CardWithImageHeadingDescriptionAvatarProps
-) => {
-  const { showBorder, image, heading, description } = props;
-
-  return (
-    <Card className={cn("w-[360px]", !showBorder && "border-none shadow-none")}>
-      {image}
-      <CardHeader>
-        <CardTitle>{heading}</CardTitle>
-        <Typography typeStyle="small" className="text-font-weak-color">
-          {description}
-        </Typography>
-      </CardHeader>
-      <CardContent>
-        <AvatarInfo {...props} />
-      </CardContent>
-    </Card>
-  );
-};
-
-const CardImageWithHeadingAndDescriptionAvatarHorizontal = (
-  props: CardWithImageHeadingDescriptionAvatarProps
-) => {
-  const { showBorder, image, heading, description } = props;
-  return (
-    <Card
-      className={cn(
-        "lg:w-[600px] w-[360px] lg:flex  lg:h-[246px]",
-        !showBorder && "border-none shadow-none "
-      )}
-    >
-      {image}
-      <div>
-        <CardHeader>
-          <CardTitle>{heading}</CardTitle>
-          <Typography typeStyle="small" className="text-font-weak-color">
-            {description}
-          </Typography>
-        </CardHeader>
-        <CardContent>
-          <AvatarInfo {...props} />
-        </CardContent>
-      </div>
-    </Card>
-  );
-};
-
-export {
-  CardWithImageHeadingDescriptionAvatarVertical,
-  CardImageWithHeadingAndDescriptionAvatarHorizontal,
-  type CardWithImageHeadingDescriptionAvatarProps,
-};

package/src/components/templates/cards/with-image-heading-description.tsx

@@ -1,63 +0,0 @@
-import { cn } from "../../../lib/utils";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Typography,
-} from "../../atoms";
-
-interface CardWithImageHeadingDescriptionProps {
-  orientation: "vertical" | "horizontal";
-  showBorder?: boolean;
-  image: React.ReactNode;
-  heading: React.ReactNode;
-  description: React.ReactNode;
-}
-
-const CardWithImageHeadingDescriptionVertical = (
-  props: CardWithImageHeadingDescriptionProps
-) => {
-  const { showBorder, image, heading, description } = props;
-  return (
-    <Card className={cn("w-[360px]", !showBorder && "border-none shadow-none")}>
-      {image}
-      <CardHeader>
-        <CardTitle>{heading}</CardTitle>
-        <Typography typeStyle="small" className="text-font-weak-color">
-          {description}
-        </Typography>
-      </CardHeader>
-      <CardContent></CardContent>
-    </Card>
-  );
-};
-
-const CardImageWithHeadingAndDescriptionHorizontal = (
-  props: CardWithImageHeadingDescriptionProps
-) => {
-  const { showBorder, image, heading, description } = props;
-  return (
-    <Card
-      className={cn(
-        "lg:w-[600px] w-[360px] lg:flex  lg:h-[150px]",
-        !showBorder && "border-none shadow-none "
-      )}
-    >
-      {image}
-      <CardHeader>
-        <CardTitle>{heading}</CardTitle>
-        <Typography typeStyle="small" className="text-font-weak-color">
-          {description}
-        </Typography>
-      </CardHeader>
-      <CardContent></CardContent>
-    </Card>
-  );
-};
-
-export {
-  CardWithImageHeadingDescriptionVertical,
-  CardImageWithHeadingAndDescriptionHorizontal,
-  type CardWithImageHeadingDescriptionProps,
-};

package/src/components/templates/hero/index.tsx

@@ -1,39 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../../lib/utils";
-
-export interface HeroProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const Hero = forwardRef<HTMLDivElement, HeroProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn("alq--hero-container", "grid", className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-export interface HeroContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {}
-const HeroContent = forwardRef<HTMLDivElement, HeroContentProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn("alq--hero-container", className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-Hero.displayName = "Hero";
-HeroContent.displayName = "HeroContent";
-
-export { Hero, HeroContent };

package/src/components/templates/index.ts

@@ -1,4 +0,0 @@
-export * from "./messages-window";
-export * from "./query-box";
-export * from "./hero";
-export * from "./cards";

package/src/components/templates/messages-window.tsx

@@ -1,15 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../lib/utils";
-
-interface MessagesWindowProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const MessagesWindow = forwardRef<HTMLDivElement, MessagesWindowProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div className={cn(className, "alq--messages--window")} {...props}></div>
-    );
-  }
-);
-
-MessagesWindow.displayName = "MessagesWindow";
-export { MessagesWindow };

package/src/components/templates/query-box.tsx

@@ -1,13 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../lib/utils";
-
-interface QueryBoxProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const QueryBox = forwardRef<HTMLDivElement, QueryBoxProps>(
-  ({ className, ...props }, ref) => {
-    return <div className={cn(className, "alq--querybox")} {...props}></div>;
-  }
-);
-
-QueryBox.displayName = "QueryBox";
-export { QueryBox };

package/src/components/ui/input.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = "Input";
-
-export { Input };

package/src/components/ui/select.tsx

@@ -1,163 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "../../lib/utils"
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-      "alq--select-trigger"
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-        "alq--select-content"
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1 bg-popover",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-popover-foreground",
-      className,
-      "alq--select-item"
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from "./components/atoms";
-export * from "./components/templates";
-export * from "./components/organisms";
-export * from "./components/molecules";
-export * from "./components/hooks";
-export * from "./lib/utils";
-export * from "./types";

package/src/lib/index.ts

@@ -1 +0,0 @@
-export * from "./utils";

package/src/lib/utils.ts

@@ -1,34 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export function parseTextToSpeech(content: string) {
-  return content.replace(/[^\p{L}\p{N}\s.,:]/gu, '');
-}
-
-
-export function blobToBase64(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-};
-
-export const truncateString = (str: string, maxLength: number): string => {
-  if (str.length <= maxLength) {
-    return str;
-  }
-  return str.slice(0, maxLength) + "...";
-};
-
-export function getCookies(name: string) {
-  if (typeof document === 'undefined') return undefined;
-  const value = `; ${document.cookie}`;
-  const parts = value.split(`; ${name}=`);
-  if (parts.length === 2) return parts.pop()?.split(";").shift();
-}