blsmedia/bot
2
0
Fork 0
Code Activity

feat(bubbles): ✨ Add image bubble

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-20 16:14:47 +01:00
parent c43fd1d386
commit 2d178978ef
33 changed files with 848 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/builder/components/account/PersonalInfoForm.tsx
View File

@ -15,7 +15,6 @@ import { UploadIcon } from 'assets/icons'
import { UploadButton } from 'components/shared/buttons/UploadButton'
import { useUser } from 'contexts/UserContext'
import React, { ChangeEvent, useState } from 'react'
import { uploadFile } from 'services/utils'
export const PersonalInfoForm = () => {
const {
@ -27,14 +26,10 @@ export const PersonalInfoForm = () => {
isOAuthProvider,
} = useUser()
const [reloadParam, setReloadParam] = useState('')
const [isUploading, setIsUploading] = useState(false)
const handleFileChange = async (file: File) => {
setIsUploading(true)
const { url } = await uploadFile(file, `${user?.id}/avatar`)
const handleFileUploaded = async (url: string) => {
setReloadParam(Date.now().toString())
updateUser({ image: url })
setIsUploading(false)
}
const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
@ -60,9 +55,9 @@ export const PersonalInfoForm = () => {
<Stack>
<UploadButton
size="sm"
filePath={`users/${user?.id}/avatar`}
leftIcon={<UploadIcon />}
isLoading={isUploading}
onUploadChange={handleFileChange}
onFileUploaded={handleFileUploaded}
>
Change photo
</UploadButton>

3
apps/builder/components/board/StepTypesList/StepIcon.tsx
View File

@ -9,6 +9,7 @@ import {
FilterIcon,
FlagIcon,
GlobeIcon,
ImageIcon,
NumberIcon,
PhoneIcon,
TextIcon,
@ -29,6 +30,8 @@ export const StepIcon = ({ type, ...props }: StepIconProps) => {
switch (type) {
case BubbleStepType.TEXT:
return <ChatIcon {...props} />
case BubbleStepType.IMAGE:
return <ImageIcon {...props} />
case InputStepType.TEXT:
return <TextIcon {...props} />
case InputStepType.NUMBER:

2
apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
View File

@ -16,6 +16,8 @@ export const StepTypeLabel = ({ type }: Props) => {
case InputStepType.TEXT: {
return <Text>Text</Text>
}
case BubbleStepType.IMAGE:
return <Text>Image</Text>
case InputStepType.NUMBER: {
return <Text>Number</Text>
}

1
apps/builder/components/board/StepTypesList/StepTypesList.tsx
View File

@ -43,7 +43,6 @@ export const StepTypesList = () => {
const x = e.clientX - rect.left
const y = e.clientY - rect.top
setRelativeCoordinates({ x, y })
console.log({ x: rect.left, y: rect.top })
setDraggedStepType(type)
}

54
apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/ContentPopover.tsx Normal file
View File

@ -0,0 +1,54 @@
import {
Portal,
PopoverContent,
PopoverArrow,
PopoverBody,
} from '@chakra-ui/react'
import { ImagePopoverContent } from 'components/shared/ImageUploadContent'
import { useTypebot } from 'contexts/TypebotContext'
import {
BubbleStep,
BubbleStepType,
ImageBubbleContent,
ImageBubbleStep,
TextBubbleStep,
} from 'models'
import { useRef } from 'react'
type Props = {
step: Exclude<BubbleStep, TextBubbleStep>
}
export const ContentPopover = ({ step }: Props) => {
const ref = useRef<HTMLDivElement | null>(null)
const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
return (
<Portal>
<PopoverContent onMouseDown={handleMouseDown} w="500px">
<PopoverArrow />
<PopoverBody ref={ref} shadow="lg">
<StepContent step={step} />
</PopoverBody>
</PopoverContent>
</Portal>
)
}
export const StepContent = ({ step }: Props) => {
const { updateStep } = useTypebot()
const handleContentChange = (content: ImageBubbleContent) =>
updateStep(step.id, { content } as Partial<ImageBubbleStep>)
const handleNewImageSubmit = (url: string) => handleContentChange({ url })
switch (step.type) {
case BubbleStepType.IMAGE: {
return (
<ImagePopoverContent
url={step.content?.url}
onSubmit={handleNewImageSubmit}
/>
)
}
}
}

1
apps/builder/components/board/graph/BlockNode/StepNode/ContentPopover/index.tsx Normal file
View File

@ -0,0 +1 @@
export { ContentPopover } from './ContentPopover'

3
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
View File

@ -15,6 +15,7 @@ import {
LogicStepType,
Step,
StepOptions,
TextBubbleStep,
} from 'models'
import { useRef } from 'react'
import {
@ -33,7 +34,7 @@ import { RedirectSettings } from './bodies/RedirectSettings'
import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
type Props = {
step: Step
step: Exclude<Step, TextBubbleStep>
onExpandClick: () => void
}

24
apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
View File

@ -7,15 +7,10 @@ import {
useEventListener,
} from '@chakra-ui/react'
import React, { useEffect, useState } from 'react'
import { DraggableStep, Step } from 'models'
import { BubbleStep, DraggableStep, Step, TextBubbleStep } from 'models'
import { useGraph } from 'contexts/GraphContext'
import { StepIcon } from 'components/board/StepTypesList/StepIcon'
import {
isInputStep,
isLogicStep,
isTextBubbleStep,
isIntegrationStep,
} from 'utils'
import { isBubbleStep, isTextBubbleStep } from 'utils'
import { Coordinates } from '@dnd-kit/core/dist/types'
import { TextEditor } from './TextEditor/TextEditor'
import { StepNodeContent } from './StepNodeContent'
@ -29,6 +24,7 @@ import { TargetEndpoint } from './TargetEndpoint'
import { useRouter } from 'next/router'
import { SettingsModal } from './SettingsPopoverContent/SettingsModal'
import { StepSettings } from './SettingsPopoverContent/SettingsPopoverContent'
import { ContentPopover } from './ContentPopover'
export const StepNode = ({
step,
@ -185,15 +181,16 @@ export const StepNode = ({
}}
pos="absolute"
right="15px"
top="18px"
bottom="18px"
/>
)}
</HStack>
</Flex>
</PopoverTrigger>
{hasPopover(step) && (
{hasSettingsPopover(step) && (
<SettingsPopoverContent step={step} onExpandClick={onModalOpen} />
)}
{hasContentPopover(step) && <ContentPopover step={step} />}
<SettingsModal isOpen={isModalOpen} onClose={onModalClose}>
<StepSettings step={step} />
</SettingsModal>
@ -203,5 +200,10 @@ export const StepNode = ({
)
}
const hasPopover = (step: Step) =>
isInputStep(step) || isLogicStep(step) || isIntegrationStep(step)
const hasSettingsPopover = (step: Step): step is Exclude<Step, BubbleStep> =>
!isBubbleStep(step)
const hasContentPopover = (
step: Step
): step is Exclude<BubbleStep, TextBubbleStep> =>
isBubbleStep(step) && !isTextBubbleStep(step)

16
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeContent.tsx
View File

@ -1,4 +1,4 @@
import { Flex, HStack, Stack, Tag, Text } from '@chakra-ui/react'
import { Box, Flex, HStack, Image, Stack, Tag, Text } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import {
Step,
@ -34,6 +34,20 @@ export const StepNodeContent = ({ step }: Props) => {
/>
)
}
case BubbleStepType.IMAGE: {
return !step.content?.url ? (
<Text color={'gray.500'}>Click to edit...</Text>
) : (
<Box w="full">
<Image
src={step.content?.url}
alt="Step image"
rounded="md"
objectFit="cover"
/>
</Box>
)
}
case InputStepType.TEXT: {
return (
<Text color={'gray.500'}>

4
apps/builder/components/board/graph/BlockNode/StepNode/TextEditor/TextEditor.tsx
View File

@ -12,7 +12,7 @@ import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { BaseSelection, createEditor, Transforms } from 'slate'
import { ToolBar } from './ToolBar'
import { parseHtmlStringToPlainText } from 'services/utils'
import { TextStep, Variable } from 'models'
import { TextBubbleStep, Variable } from 'models'
import { VariableSearchInput } from 'components/shared/VariableSearchInput'
import { ReactEditor } from 'slate-react'
@ -87,7 +87,7 @@ export const TextEditor = ({
richText: value,
plainText: parseHtmlStringToPlainText(html),
},
} as TextStep)
} as TextBubbleStep)
}
const handleMouseDown = (e: React.MouseEvent) => {

61
apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx Normal file
View File

@ -0,0 +1,61 @@
import { Flex, Input, Stack } from '@chakra-ui/react'
import { GiphyFetch } from '@giphy/js-fetch-api'
import { Grid, SearchContext } from '@giphy/react-components'
import { GiphyLogo } from 'assets/logos'
import React, { useContext, useState, useEffect } from 'react'
import { useDebounce } from 'use-debounce'
type GiphySearchProps = {
onSubmit: (url: string) => void
}
const giphyFetch = new GiphyFetch(
process.env.NEXT_PUBLIC_GIPHY_API_KEY as string
)
export const GiphySearch = ({ onSubmit }: GiphySearchProps) => {
const { fetchGifs, searchKey, setSearch } = useContext(SearchContext)
const fetchGifsTrending = (offset: number) =>
giphyFetch.trending({ offset, limit: 10 })
const [inputValue, setInputValue] = useState('')
const [debouncedInputValue] = useDebounce(inputValue, 300)
useEffect(() => {
if (debouncedInputValue === '') return
setSearch(debouncedInputValue)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedInputValue])
const updateUrl = (url: string) => {
onSubmit(url)
}
return (
<Stack>
<Flex align="center">
<Input
flex="1"
autoFocus
placeholder="Search..."
onChange={(e) => setInputValue(e.target.value)}
value={inputValue}
/>
<GiphyLogo w="100px" />
</Flex>
<Flex overflowY="scroll" maxH="400px">
<Grid
onGifClick={(gif, e) => {
e.preventDefault()
updateUrl(gif.images.downsized.url)
}}
key={searchKey}
fetchGifs={searchKey === '' ? fetchGifsTrending : fetchGifs}
width={475}
columns={3}
className="my-4"
/>
</Flex>
</Stack>
)
}

119
apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx Normal file
View File

@ -0,0 +1,119 @@
import { ChangeEvent, FormEvent, useState } from 'react'
import { Button, HStack, Input, Stack } from '@chakra-ui/react'
import { SearchContextManager } from '@giphy/react-components'
import { UploadButton } from '../buttons/UploadButton'
import { GiphySearch } from './GiphySearch'
import { useTypebot } from 'contexts/TypebotContext'
type Props = {
url?: string
onSubmit: (url: string) => void
}
export const ImageUploadContent = ({ url, onSubmit }: Props) => {
const [currentTab, setCurrentTab] = useState<'link' | 'upload' | 'giphy'>(
'upload'
)
return (
<Stack>
<HStack>
<Button
variant={currentTab === 'upload' ? 'solid' : 'ghost'}
onClick={() => setCurrentTab('upload')}
size="sm"
>
Upload
</Button>
<Button
variant={currentTab === 'link' ? 'solid' : 'ghost'}
onClick={() => setCurrentTab('link')}
size="sm"
>
Embed link
</Button>
{process.env.NEXT_PUBLIC_GIPHY_API_KEY && (
<Button
variant={currentTab === 'giphy' ? 'solid' : 'ghost'}
onClick={() => setCurrentTab('giphy')}
size="sm"
>
Giphy
</Button>
)}
</HStack>
<BodyContent tab={currentTab} onSubmit={onSubmit} url={url} />
</Stack>
)
}
const BodyContent = ({
tab,
url,
onSubmit,
}: {
tab: 'upload' | 'link' | 'giphy'
url?: string
onSubmit: (url: string) => void
}) => {
switch (tab) {
case 'upload':
return <UploadFileContent onNewUrl={onSubmit} />
case 'link':
return <EmbedLinkContent initialUrl={url} onNewUrl={onSubmit} />
case 'giphy':
return <GiphyContent onNewUrl={onSubmit} />
}
}
type ContentProps = { initialUrl?: string; onNewUrl: (url: string) => void }
const UploadFileContent = ({ onNewUrl }: ContentProps) => {
const { typebot } = useTypebot()
return (
<Stack>
<UploadButton
filePath={`typebots/${typebot?.id}`}
onFileUploaded={onNewUrl}
includeFileName
colorScheme="blue"
>
Choose an image
</UploadButton>
</Stack>
)
}
const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
const [imageUrl, setImageUrl] = useState(initialUrl ?? '')
const handleImageUrlChange = (e: ChangeEvent<HTMLInputElement>) =>
setImageUrl(e.target.value)
const handleUrlSubmit = (e: FormEvent) => {
e.preventDefault()
onNewUrl(imageUrl)
}
return (
<Stack as="form" onSubmit={handleUrlSubmit}>
<Input
placeholder={'Paste the image link...'}
onChange={handleImageUrlChange}
value={imageUrl}
/>
<Button type="submit" disabled={imageUrl === ''} colorScheme="blue">
Embed image
</Button>
</Stack>
)
}
const GiphyContent = ({ onNewUrl }: ContentProps) => (
<SearchContextManager
apiKey={process.env.NEXT_PUBLIC_GIPHY_API_KEY as string}
>
<GiphySearch onSubmit={onNewUrl} />
</SearchContextManager>
)

1
apps/builder/components/shared/ImageUploadContent/index.tsx Normal file
View File

@ -0,0 +1 @@
export { ImageUploadContent as ImagePopoverContent } from './ImageUploadContent'

29
apps/builder/components/shared/buttons/UploadButton.tsx
View File

@ -1,19 +1,37 @@
import { Button, ButtonProps, chakra } from '@chakra-ui/react'
import React, { ChangeEvent } from 'react'
import React, { ChangeEvent, useState } from 'react'
import { compressFile, uploadFile } from 'services/utils'
type UploadButtonProps = { onUploadChange: (file: File) => void } & ButtonProps
type UploadButtonProps = {
filePath: string
includeFileName?: boolean
onFileUploaded: (url: string) => void
} & ButtonProps
export const UploadButton = ({
onUploadChange,
filePath,
includeFileName,
onFileUploaded,
...props
}: UploadButtonProps) => {
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
const [isUploading, setIsUploading] = useState(false)
const handleInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
if (!e.target?.files) return
onUploadChange(e.target.files[0])
setIsUploading(true)
const file = e.target.files[0]
const { url } = await uploadFile(
await compressFile(file),
filePath + (includeFileName ? `/${file.name}` : '')
)
if (url) onFileUploaded(url)
setIsUploading(false)
}
return (
<>
<chakra.input
data-testid="file-upload-input"
type="file"
id="file-input"
display="none"
@ -25,6 +43,7 @@ export const UploadButton = ({
size="sm"
htmlFor="file-input"
cursor="pointer"
isLoading={isUploading}
{...props}
>
{props.children}