@clikvn/agent-widget-embedded 0.0.5-dev → 0.0.7-dev

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clikvn/agent-widget-embedded",
   "description": "This is agent widget",
-  "version": "0.0.5-dev",
+  "version": "0.0.7-dev",
   "author": "Clik JSC",
   "license": "ISC",
   "type": "module",

package/src/components/Chat/AudioPlayer.tsx

@@ -18,7 +18,6 @@ const AudioPlayer = ({
     } else {
       audioRef.current.play();
     }
-    setIsPlaying(!isPlaying);
   };
 
   return (
@@ -35,6 +34,8 @@ const AudioPlayer = ({
         src={src}
         autoPlay={autoplay}
         onEnded={() => setIsPlaying(false)}
+        onPause={() => setIsPlaying(false)}
+        onPlay={() => setIsPlaying(true)}
       ></audio>
     </>
   );

package/src/components/Chat/MultimodalInput.tsx

@@ -31,6 +31,7 @@ import { Button } from './ui/Button';
 import { Textarea } from './ui/Textarea';
 import { useAudioRecording } from '../../hooks/useAudioRecording';
 import { useChatData } from '../../hooks/useChatData';
+import { useConfiguration } from '../../hooks/useConfiguration';
 
 type PropsType = {
   input: string;
@@ -72,6 +73,7 @@ export const MultimodalInput: FC<PropsType> = ({
   setEnableTTS,
   enableTTS,
 }) => {
+  const { theme } = useConfiguration();
   const { suggestedActions = [] } = useChatData();
   const {
     isRecording,
@@ -352,7 +354,7 @@ export const MultimodalInput: FC<PropsType> = ({
 
       <Textarea
         ref={textareaRef}
-        placeholder="Send a message..."
+        placeholder={theme?.input?.placeholder || 'Send a message...'}
         value={input}
         onChange={handleInput}
         className={cn(

package/src/components/Chat/Overview.tsx

@@ -1,15 +1,17 @@
 import { motion } from 'framer-motion';
 import { FC } from 'react';
 import { BotType } from '../../types/bot.type';
+import { useConfiguration } from '../../hooks/useConfiguration';
 
 type PropsType = {
   bot: BotType | null;
 };
 export const Overview: FC<PropsType> = ({ bot }: PropsType) => {
+  const { theme } = useConfiguration();
   return (
     <motion.div
       key="overview"
-      className="max-w-3xl mx-auto md:mt-20"
+      className="max-w-3xl m-auto md:mt-20"
       initial={{ opacity: 0, scale: 0.98 }}
       animate={{ opacity: 1, scale: 1 }}
       exit={{ opacity: 0, scale: 0.98 }}
@@ -17,28 +19,25 @@ export const Overview: FC<PropsType> = ({ bot }: PropsType) => {
     >
       <div className="rounded-xl p-6 flex flex-col gap-2 leading-relaxed text-center max-w-xl">
         <p className="flex flex-row justify-center gap-4 items-center"></p>
-        {bot?.avatar && (
-          <img
-            src={bot?.avatar}
-            alt={bot?.name ?? 'Avatar'}
-            width={40}
-            height={40}
-            className="rounded-full m-auto"
-          />
+        {!theme?.overview ? (
+          <>
+            {bot?.avatar && (
+              <img
+                src={bot?.avatar}
+                alt={bot?.name ?? 'Avatar'}
+                width={40}
+                height={40}
+                className="rounded-full m-auto"
+              />
+            )}
+            <p className="font-semibold text-xl">{bot?.name}</p>
+          </>
+        ) : (
+          <>
+            <p className="font-semibold text-xl">{theme?.overview?.title}</p>
+            <p>{theme?.overview?.description}</p>
+          </>
         )}
-
-        <p className="font-semibold text-xl">{`${bot?.name}`}</p>
-        <p>
-          {/* You can learn more about the AI by visiting the{' '}*/}
-          {/* <Link*/}
-          {/*  className="font-medium underline underline-offset-4"*/}
-          {/*  href="https://showai.ai"*/}
-          {/*  target="_blank"*/}
-          {/* >*/}
-          {/*  ShowAI*/}
-          {/* </Link>*/}
-          {/* .*/}
-        </p>
       </div>
     </motion.div>
   );

package/src/hooks/useConfiguration.tsx

@@ -6,6 +6,13 @@ type ConfigurationData = {
   overrideConfig?: Record<string, any>;
   theme?: {
     avatar?: string;
+    input?: {
+      placeholder?: string;
+    };
+    overview?: {
+      title: string;
+      description?: string;
+    };
   } & Record<string, unknown>;
 };
 
@@ -21,8 +28,7 @@ export const ConfigurationProvider = ({
   config: ConfigurationData;
 }) => {
   const [configuration, setConfiguration] = useState<ConfigurationData>({
-    apiHost: config.apiHost,
-    agentId: config.agentId,
+    ...config,
   });
 
   useEffect(() => {

package/src/register.tsx

@@ -14,6 +14,13 @@ export type AgentWidgetType = {
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
+    input?: {
+      placeholder?: string;
+    };
+    overview?: {
+      title: string;
+      description?: string;
+    };
   } & Record<string, unknown>;
   listeners?: Record<EVENT_TYPE, (props: any) => void>;
 };
@@ -28,6 +35,13 @@ export class AgentWidgetComponent extends HTMLElement {
   } & Record<string, unknown>;
   theme?: {
     avatar?: string;
+    input?: {
+      placeholder?: string;
+    };
+    overview?: {
+      title: string;
+      description?: string;
+    };
   } & Record<string, unknown>;
   listeners?: Record<EVENT_TYPE, (props: any) => void>;
   constructor() {