@alquimia-ai/ui 1.6.1 → 1.7.1

package/dist/components/organisms/index.d.mts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Message } from 'ai';
+import { TTSResult, Tooler, ToolFactory, RatingData } from '../../types/index.mjs';
 import * as React$1 from 'react';
 import { AlquimiaSDK } from '@alquimia-ai/tools/sdk';
-import { Tooler, ToolFactory, RatingData } from '../../types/index.mjs';
 
 interface WhisperProps extends React.HTMLAttributes<HTMLDivElement> {
     message: Message;
     isMessageStreaming: boolean;
-    textToSpeech: (content: string) => Promise<Blob>;
+    textToSpeech: (content: string) => Promise<TTSResult>;
 }
 declare function Whisper({ className, message, isMessageStreaming, textToSpeech, }: WhisperProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/organisms/index.d.ts

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Message } from 'ai';
+import { TTSResult, Tooler, ToolFactory, RatingData } from '../../types/index.js';
 import * as React$1 from 'react';
 import { AlquimiaSDK } from '@alquimia-ai/tools/sdk';
-import { Tooler, ToolFactory, RatingData } from '../../types/index.js';
 
 interface WhisperProps extends React.HTMLAttributes<HTMLDivElement> {
     message: Message;
     isMessageStreaming: boolean;
-    textToSpeech: (content: string) => Promise<Blob>;
+    textToSpeech: (content: string) => Promise<TTSResult>;
 }
 declare function Whisper({ className, message, isMessageStreaming, textToSpeech, }: WhisperProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/organisms/index.js

@@ -95,18 +95,34 @@ function Whisper({
     audioUrl && (audioUrl.currentTime = 0);
     audioUrl?.pause();
   };
+  const playAudio = (url) => {
+    const audio = new Audio(url);
+    audio.play();
+    setAudioUrl(audio);
+  };
   const handleAudioPlay = () => isPlaying ? resetAudio() : audioUrl?.play();
   const handleTextToSpeech = async (content2) => {
     if (!audioUrl) {
       setIsLoading(true);
-      const filteredContent = parseTextToSpeech(content2);
-      const audioFile = await textToSpeech(filteredContent);
-      if (audioFile) {
-        const url = URL.createObjectURL(audioFile);
-        const audio = new Audio(url);
+      try {
+        const filteredContent = parseTextToSpeech(content2);
+        const audioFile = await textToSpeech(filteredContent);
+        if (audioFile) {
+          switch (audioFile.type) {
+            case "url":
+              await playAudio(audioFile.data);
+              break;
+            case "blob":
+              await playAudio(URL.createObjectURL(audioFile.data));
+              break;
+            default:
+              console.error("Error obtaining audio", audioFile.message);
+          }
+        }
+      } catch (error) {
+        console.error("Error in text to speech:", error);
+      } finally {
         setIsLoading(false);
-        audio.play();
-        setAudioUrl(audio);
       }
     } else {
       setIsLoading(false);
@@ -116,10 +132,22 @@ function Whisper({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn(className), children: [
     isMessageStreaming && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2 w-[24px] h-[24px]" }),
     !isMessageStreaming && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { onClick: () => handleTextToSpeech(content), children: [
-      isPlaying && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "p-2 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AudioLinesIcon, { size: 20, className: "animate-[wave_0.7s_infinite_ease-in-out]" }) }),
-      isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "p-2 items-center justify-center", children: [
+      isPlaying && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "p-2 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_lucide_react.AudioLinesIcon,
+        {
+          size: 20,
+          className: "animate-[wave_0.7s_infinite_ease-in-out]"
+        }
+      ) }),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { disabled: true, className: "p-2 items-center justify-center", children: [
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LoaderCircleIcon, { size: 20, className: "animate-[spin_1s_linear_infinite]" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_lucide_react.LoaderCircleIcon,
+          {
+            size: 20,
+            className: "animate-[spin_1s_linear_infinite]"
+          }
+        )
       ] }),
       !isLoading && !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
@@ -2725,15 +2753,6 @@ var AssistantMessageArea = React34.forwardRef(
               role: message.role,
               message,
               children: [
-                message.created_at && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-xs text-muted-foreground/80 pb-1", children: 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
-                }) }),
                 streamingMessageId === message.id && (isLoading || message.content.length === 0) && !message.error_code && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { children: thinkIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ThinkIndicator, {}) }),
                 message.error_code && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                   CallOutResponse,
@@ -2743,25 +2762,45 @@ var AssistantMessageArea = React34.forwardRef(
                     children: "We have an internal error, please try again later."
                   }
                 ),
-                message.tooler && !message.error_code && hasToolResult(message.tooler) && toolFactory?.createTool(message.tooler?.tool_summary?.name, message.tooler?.tool_output?.result),
-                message.content && !message.error_code && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  CallOutResponse,
-                  {
-                    role: message.role,
-                    isStreaming: streamingMessageId === message.id,
-                    handleIsTextStreaming,
-                    additionalInfo: streamingMessageId !== message.id ? message?.additionalInfo : void 0,
-                    children: message.content
-                  }
+                message.tooler && !message.error_code && hasToolResult(message.tooler) && toolFactory?.createTool(
+                  message.tooler?.tool_summary?.name,
+                  message.tooler?.tool_output?.result
                 ),
-                actions && streamingMessageId !== message.id && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  CallOutActions,
+                message.content && !message.error_code && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                  "div",
                   {
-                    actions,
-                    message,
-                    role: message.role
-                  },
-                  message.id
+                    "data-role": message.role,
+                    className: "alq--callout-message-container",
+                    children: [
+                      message.created_at && streamingMessageId !== message.id && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-xs text-muted-foreground/80 pb-1 alq--callout-message-date", children: new Date(Number(message.created_at)).toLocaleString(
+                        "es-ES",
+                        {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                          hour12: false
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                        CallOutResponse,
+                        {
+                          role: message.role,
+                          isStreaming: streamingMessageId === message.id,
+                          handleIsTextStreaming,
+                          additionalInfo: streamingMessageId !== message.id ? message?.additionalInfo : void 0,
+                          children: message.content
+                        }
+                      ),
+                      actions && streamingMessageId !== message.id && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                        CallOutActions,
+                        {
+                          actions,
+                          message,
+                          role: message.role
+                        },
+                        message.id
+                      )
+                    ]
+                  }
                 )
               ]
             },