@alquimia-ai/ui 1.2.0 → 1.2.1

package/src/components/organisms/whisper.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/lib/utils.ts

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