Skip to content

Commit

Permalink
⚡ (imageBubble) Add redirect on image click option
Browse files Browse the repository at this point in the history
Closes #448
  • Loading branch information
baptisteArno committed Apr 7, 2023
1 parent ee14228 commit e06f818
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 26 deletions.
Original file line number Diff line number Diff line change
@@ -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>
)
}
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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}
/>
)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/embeds/js/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/embeds/js/src/components/bubbles/HostBubble.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/embeds/react/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
6 changes: 6 additions & 0 deletions packages/schemas/features/blocks/bubbles/image.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down

4 comments on commit e06f818

@vercel
Copy link

@vercel vercel bot commented on e06f818 Apr 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on e06f818 Apr 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs – ./apps/docs

docs.typebot.io
docs-git-main-typebot-io.vercel.app
docs-typebot-io.vercel.app

@vercel
Copy link

@vercel vercel bot commented on e06f818 Apr 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

builder-v2 – ./apps/builder

app.typebot.io
builder-v2-git-main-typebot-io.vercel.app
builder-v2-typebot-io.vercel.app

@vercel
Copy link

@vercel vercel bot commented on e06f818 Apr 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

viewer-v2 – ./apps/viewer

goldorayo.com
rabbit.cr8.ai
signup.cr8.ai
start.taxt.co
turkey.cr8.ai
vhpage.cr8.ai
vitamyway.com
am.nigerias.io
an.nigerias.io
app.yvon.earth
ar.nigerias.io
bot.enreso.org
bot.rslabs.pro
bots.bridge.ai
chat.hayuri.id
chatgpt.lam.ee
chicken.cr8.ai
gollum.riku.ai
gsbulletin.com
journey.cr8.ai
panther.cr7.ai
panther.cr8.ai
pay.sifuim.com
penguin.cr8.ai
talk.gocare.io
test.bot.gives
ticketfute.com
unicorn.cr8.ai
apo.nigerias.io
apr.nigerias.io
aso.nigerias.io
blackcan.cr8.ai
bot.ageenda.com
bot.artiweb.app
bot.devitus.com
bot.jesopizz.it
bot.reeplai.com
bot.scayver.com
bot.tc-mail.com
chat.lalmon.com
chat.sureb4.com
eventhub.com.au
fitness.riku.ai
games.klujo.com
sakuranembro.it
typebot.aloe.do
bot.contakit.com
bot.piccinato.co
bot.sv-energy.it
botc.ceox.com.br
clo.closeer.work
cockroach.cr8.ai
faqs.nigerias.io
form.syncwin.com
haymanevents.com
kw.wpwakanda.com
myrentalhost.com
stan.vselise.com
start.taxtree.io
typebot.aloe.bot
voicehelp.cr8.ai
zap.fundviser.in
app.bouclidom.com
app.chatforms.net
bot.hostnation.de
bot.maitempah.com
bot.phuonghub.com
bot.reviewzer.com
bot.rihabilita.it
cares.urlabout.me
chat.gaswadern.de
chat.rojie.online
fmm.wpwakanda.com
footballmeetup.ie
gentleman-shop.fr
k1.kandabrand.com
kp.pedroknoll.com
lb.ticketfute.com
ov1.wpwakanda.com
ov2.wpwakanda.com
ov3.wpwakanda.com
support.triplo.ai
viewer.typebot.io
welcome.triplo.ai
1988.bouclidom.com
andreimayer.com.br
bot.danyservice.it
bot.iconicbrows.it
bot.lucide.contact
bot.megafox.com.br
bot.neferlopez.com
bots.robomotion.io
cadu.uninta.edu.br
chat.tuanpakya.com
newsletter.itshcormeos.com
rsvp.virtuesocialmedia.com
tarian.theiofoundation.org
ted.meujalecobrasil.com.br
type.dericsoncalari.com.br
bot.pinpointinteractive.com

Please sign in to comment.