⚡ (imageBubble) Add redirect on image click option

Closes #448

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleSettings.tsx

@@ -0,0 +1,80 @@
+import { ImageUploadContent } from '@/components/ImageUploadContent'
+import { TextInput } from '@/components/inputs'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
+import { Stack } from '@chakra-ui/react'
+import { isDefined, isNotEmpty } from '@typebot.io/lib'
+import { ImageBubbleBlock } from '@typebot.io/schemas'
+import React, { useState } from 'react'
+
+type Props = {
+  typebotId: string
+  block: ImageBubbleBlock
+  onContentChange: (content: ImageBubbleBlock['content']) => void
+}
+
+export const ImageBubbleSettings = ({
+  typebotId,
+  block,
+  onContentChange,
+}: Props) => {
+  const [showClickLinkInput, setShowClickLinkInput] = useState(
+    isNotEmpty(block.content.clickLink?.url)
+  )
+
+  const updateImage = (url: string) => {
+    onContentChange({ ...block.content, url })
+  }
+
+  const updateClickLinkUrl = (url: string) => {
+    onContentChange({
+      ...block.content,
+      clickLink: { ...block.content.clickLink, url },
+    })
+  }
+
+  const updateClickLinkAltText = (alt: string) => {
+    onContentChange({
+      ...block.content,
+      clickLink: { ...block.content.clickLink, alt },
+    })
+  }
+
+  const toggleClickLink = () => {
+    if (isDefined(block.content.clickLink) && showClickLinkInput) {
+      onContentChange({ ...block.content, clickLink: undefined })
+    }
+    setShowClickLinkInput(!showClickLinkInput)
+  }
+
+  return (
+    <Stack p="2" spacing={4}>
+      <ImageUploadContent
+        filePath={`typebots/${typebotId}/blocks/${block.id}`}
+        defaultUrl={block.content?.url}
+        onSubmit={updateImage}
+      />
+      <Stack>
+        <SwitchWithLabel
+          label={'On click link'}
+          initialValue={showClickLinkInput}
+          onCheckChange={toggleClickLink}
+        />
+        {showClickLinkInput && (
+          <>
+            <TextInput
+              autoFocus
+              placeholder="https://example.com"
+              onChange={updateClickLinkUrl}
+              defaultValue={block.content.clickLink?.url}
+            />
+            <TextInput
+              placeholder="Link alt text (description)"
+              onChange={updateClickLinkAltText}
+              defaultValue={block.content.clickLink?.alt}
+            />
+          </>
+        )}
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/src/features/graph/components/nodes/block/MediaBubblePopoverContent.tsx

@@ -1,6 +1,6 @@
-import { ImageUploadContent } from '@/components/ImageUploadContent'
 import { AudioBubbleForm } from '@/features/blocks/bubbles/audio/components/AudioBubbleForm'
 import { EmbedUploadContent } from '@/features/blocks/bubbles/embed/components/EmbedUploadContent'
+import { ImageBubbleSettings } from '@/features/blocks/bubbles/image/components/ImageBubbleSettings'
 import { VideoUploadContent } from '@/features/blocks/bubbles/video/components/VideoUploadContent'
 import {
   Portal,
@@ -46,15 +46,13 @@ export const MediaBubbleContent = ({
   block,
   onContentChange,
 }: Props) => {
-  const handleImageUrlChange = (url: string) => onContentChange({ url })
-
   switch (block.type) {
     case BubbleBlockType.IMAGE: {
       return (
-        <ImageUploadContent
-          filePath={`typebots/${typebotId}/blocks/${block.id}`}
-          defaultUrl={block.content?.url}
-          onSubmit={handleImageUrlChange}
+        <ImageBubbleSettings
+          typebotId={typebotId}
+          block={block}
+          onContentChange={onContentChange}
         />
       )
     }

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/components/bubbles/HostBubble.tsx

@@ -37,7 +37,7 @@ export const HostBubble = (props: Props) => {
       </Match>
       <Match when={props.message.type === BubbleBlockType.IMAGE}>
         <ImageBubble
-          url={(props.message.content as ImageBubbleContent).url}
+          content={props.message.content as ImageBubbleContent}
           onTransitionEnd={onTransitionEnd}
         />
       </Match>

packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx

@@ -3,7 +3,7 @@ import type { ImageBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
 
 type Props = {
-  url: ImageBubbleContent['url']
+  content: ImageBubbleContent
   onTransitionEnd: () => void
 }
 
@@ -38,6 +38,21 @@ export const ImageBubble = (props: Props) => {
     if (typingTimeout) clearTimeout(typingTimeout)
   })
 
+  const Image = (
+    <img
+      ref={image}
+      src={props.content.url}
+      alt={props.content.clickLink?.alt ?? 'Bubble image'}
+      class={
+        'text-fade-in w-full ' + (isTyping() ? 'opacity-0' : 'opacity-100')
+      }
+      style={{
+        'max-height': '512px',
+        height: isTyping() ? '32px' : 'auto',
+      }}
+    />
+  )
+
   return (
     <div class="flex flex-col animate-fade-in">
       <div class="flex mb-2 w-full items-center">
@@ -51,21 +66,17 @@ export const ImageBubble = (props: Props) => {
           >
             {isTyping() ? <TypingBubble /> : null}
           </div>
-          <figure class="p-4 z-10">
-            <img
-              ref={image}
-              src={props.url}
-              class={
-                'text-fade-in w-full ' +
-                (isTyping() ? 'opacity-0' : 'opacity-100')
-              }
-              style={{
-                'max-height': '512px',
-                height: isTyping() ? '32px' : 'auto',
-              }}
-              alt="Bubble image"
-            />
-          </figure>
+          {props.content.clickLink ? (
+            <a
+              href={props.content.clickLink.url}
+              target="_blank"
+              class="p-4 z-10"
+            >
+              {Image}
+            </a>
+          ) : (
+            <figure class="p-4 z-10">{Image}</figure>
+          )}
         </div>
       </div>
     </div>

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/schemas/features/blocks/bubbles/image.ts

@@ -4,6 +4,12 @@ import { BubbleBlockType } from './enums'
 
 export const imageBubbleContentSchema = z.object({
   url: z.string().optional(),
+  clickLink: z
+    .object({
+      url: z.string().optional(),
+      alt: z.string().optional(),
+    })
+    .optional(),
 })
 
 export const imageBubbleBlockSchema = blockBaseSchema.merge(