⚡ (setVariable) Add client-side set variable execution

Closes #461

packages/embeds/js/src/components/ConversationContainer/AvatarSideContainer.tsx

@@ -2,7 +2,7 @@ import { createSignal, onCleanup, onMount } from 'solid-js'
 import { isMobile } from '@/utils/isMobileSignal'
 import { Avatar } from '../avatars/Avatar'
 
-type Props = { hostAvatarSrc?: string }
+type Props = { hostAvatarSrc?: string; hideAvatar?: boolean }
 
 export const AvatarSideContainer = (props: Props) => {
   let avatarContainer: HTMLDivElement | undefined
@@ -34,12 +34,13 @@ export const AvatarSideContainer = (props: Props) => {
     >
       <div
         class={
-          'absolute mb-2 flex items-center top-0 ' +
-          (isMobile() ? 'w-6 h-6' : 'w-10 h-10')
+          'absolute mb-2 flex items-center top-0' +
+          (isMobile() ? ' w-6 h-6' : ' w-10 h-10') +
+          (props.hideAvatar ? ' opacity-0' : ' opacity-100')
         }
         style={{
           top: `${top()}px`,
-          transition: 'top 350ms ease-out',
+          transition: 'top 350ms ease-out, opacity 250ms ease-out',
         }}
       >
         <Avatar initialAvatarSrc={props.hostAvatarSrc} />

packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -13,6 +13,7 @@ type Props = Pick<ChatReply, 'messages' | 'input'> & {
   context: BotContext
   isLoadingBubbleDisplayed: boolean
   hasError: boolean
+  hideAvatar: boolean
   onNewBubbleDisplayed: (blockId: string) => Promise<void>
   onScrollToBottom: () => void
   onSubmit: (input: string) => void
@@ -56,6 +57,7 @@ export const ChatChunk = (props: Props) => {
           >
             <AvatarSideContainer
               hostAvatarSrc={props.theme.chat.hostAvatar?.url}
+              hideAvatar={props.hideAvatar}
             />
           </Show>
           <div

packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -70,7 +70,12 @@ export const ConversationContainer = (props: Props) => {
         )
         for (const action of actionsBeforeFirstBubble) {
           const response = await executeClientSideAction(action)
-          if (response) setBlockedPopupUrl(response.blockedPopupUrl)
+          if (response && 'replyToSend' in response) {
+            sendMessage(response.replyToSend)
+            return
+          }
+          if (response && 'blockedPopupUrl' in response)
+            setBlockedPopupUrl(response.blockedPopupUrl)
         }
       }
     })()
@@ -122,7 +127,12 @@ export const ConversationContainer = (props: Props) => {
       )
       for (const action of actionsBeforeFirstBubble) {
         const response = await executeClientSideAction(action)
-        if (response) setBlockedPopupUrl(response.blockedPopupUrl)
+        if (response && 'replyToSend' in response) {
+          sendMessage(response.replyToSend)
+          return
+        }
+        if (response && 'blockedPopupUrl' in response)
+          setBlockedPopupUrl(response.blockedPopupUrl)
       }
     }
     setChatChunks((displayedChunks) => [
@@ -159,7 +169,12 @@ export const ConversationContainer = (props: Props) => {
       )
       for (const action of actionsToExecute) {
         const response = await executeClientSideAction(action)
-        if (response) setBlockedPopupUrl(response.blockedPopupUrl)
+        if (response && 'replyToSend' in response) {
+          sendMessage(response.replyToSend)
+          return
+        }
+        if (response && 'blockedPopupUrl' in response)
+          setBlockedPopupUrl(response.blockedPopupUrl)
       }
     }
   }
@@ -187,6 +202,7 @@ export const ConversationContainer = (props: Props) => {
             onSkip={handleSkip}
             context={props.context}
             hasError={hasError() && index() === chatChunks().length - 1}
+            hideAvatar={!chatChunk.input && index() < chatChunks().length - 1}
           />
         )}
       </For>