diff --git a/apps/builder/components/dashboard/WorkspaceSettingsModal/MyAccountForm/MyAccountForm.tsx b/apps/builder/components/dashboard/WorkspaceSettingsModal/MyAccountForm/MyAccountForm.tsx index c7774995b..9a8d157f5 100644 --- a/apps/builder/components/dashboard/WorkspaceSettingsModal/MyAccountForm/MyAccountForm.tsx +++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/MyAccountForm/MyAccountForm.tsx @@ -52,7 +52,7 @@ export const MyAccountForm = () => { } onFileUploaded={handleFileUploaded} > diff --git a/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsForm.tsx b/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsForm.tsx index 801bc05b1..3e220ee30 100644 --- a/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsForm.tsx +++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsForm.tsx @@ -37,11 +37,14 @@ export const WorkspaceSettingsForm = ({ onClose }: { onClose: () => void }) => { Icon - + {workspace && ( + + )} diff --git a/apps/builder/components/settings/MetadataForm.tsx b/apps/builder/components/settings/MetadataForm.tsx index b02366060..0fc8a8c06 100644 --- a/apps/builder/components/settings/MetadataForm.tsx +++ b/apps/builder/components/settings/MetadataForm.tsx @@ -16,12 +16,14 @@ import { CodeEditor } from 'components/shared/CodeEditor' import { MoreInfoTooltip } from 'components/shared/MoreInfoTooltip' type Props = { + typebotId: string typebotName: string metadata: Metadata onMetadataChange: (metadata: Metadata) => void } export const MetadataForm = ({ + typebotId, typebotName, metadata, onMetadataChange, @@ -57,7 +59,8 @@ export const MetadataForm = ({ @@ -81,7 +84,8 @@ export const MetadataForm = ({ diff --git a/apps/builder/components/settings/SettingsSideMenu.tsx b/apps/builder/components/settings/SettingsSideMenu.tsx index f5dde1bc5..df3a380ab 100644 --- a/apps/builder/components/settings/SettingsSideMenu.tsx +++ b/apps/builder/components/settings/SettingsSideMenu.tsx @@ -90,6 +90,7 @@ export const SettingsSideMenu = () => { {typebot && ( void boxSize?: string } export const EditableEmojiOrImageIcon = ({ + uploadFilePath, icon, onChangeIcon, boxSize, @@ -47,7 +49,8 @@ export const EditableEmojiOrImageIcon = ({ )} - {isMediaBubbleBlock(block) && ( + {typebot && isMediaBubbleBlock(block) && ( diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx index 40eeedbb6..11978d355 100644 --- a/apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx +++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx @@ -16,6 +16,7 @@ import { EmbedUploadContent } from './EmbedUploadContent' import { VideoUploadContent } from './VideoUploadContent' type Props = { + typebotId: string block: Exclude onContentChange: (content: BubbleBlockContent) => void } @@ -39,14 +40,19 @@ export const MediaBubblePopoverContent = (props: Props) => { ) } -export const MediaBubbleContent = ({ block, onContentChange }: Props) => { +export const MediaBubbleContent = ({ + typebotId, + block, + onContentChange, +}: Props) => { const handleImageUrlChange = (url: string) => onContentChange({ url }) switch (block.type) { case BubbleBlockType.IMAGE: { return ( ) diff --git a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx index 45435f1f8..b3b47ed8b 100644 --- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx +++ b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx @@ -2,12 +2,13 @@ import { useState } from 'react' import { Button, Flex, HStack, Stack } from '@chakra-ui/react' import { UploadButton } from '../buttons/UploadButton' import { GiphySearchForm } from './GiphySearchForm' -import { useTypebot } from 'contexts/TypebotContext' import { Input } from '../Textbox/Input' import { EmojiSearchableList } from './emoji/EmojiSearchableList' type Props = { - url?: string + filePath: string + includeFileName?: boolean + defaultUrl?: string isEmojiEnabled?: boolean isGiphyEnabled?: boolean onSubmit: (url: string) => void @@ -15,7 +16,9 @@ type Props = { } export const ImageUploadContent = ({ - url, + filePath, + includeFileName, + defaultUrl, onSubmit, isEmojiEnabled = false, isGiphyEnabled = true, @@ -67,25 +70,41 @@ export const ImageUploadContent = ({ )} - + ) } const BodyContent = ({ + includeFileName, + filePath, tab, - url, + defaultUrl, onSubmit, }: { + includeFileName?: boolean + filePath: string tab: 'upload' | 'link' | 'giphy' | 'emoji' - url?: string + defaultUrl?: string onSubmit: (url: string) => void }) => { switch (tab) { case 'upload': - return + return ( + + ) case 'link': - return + return case 'giphy': return case 'emoji': @@ -93,30 +112,34 @@ const BodyContent = ({ } } -type ContentProps = { initialUrl?: string; onNewUrl: (url: string) => void } +type ContentProps = { onNewUrl: (url: string) => void } -const UploadFileContent = ({ onNewUrl }: ContentProps) => { - const { typebot } = useTypebot() - return ( - - - Choose an image - - - ) -} +const UploadFileContent = ({ + filePath, + includeFileName, + onNewUrl, +}: ContentProps & { filePath: string; includeFileName?: boolean }) => ( + + + Choose an image + + +) -const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => ( +const EmbedLinkContent = ({ + defaultUrl, + onNewUrl, +}: ContentProps & { defaultUrl?: string }) => ( ) diff --git a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx index df85f6cd7..b10b5ed61 100644 --- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx +++ b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx @@ -140,10 +140,13 @@ export const TypebotHeader = () => { size="sm" /> - + {typebot && ( + + )} {typebot?.name && ( diff --git a/apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx b/apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx index 0203c436d..5e42d627d 100644 --- a/apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx +++ b/apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx @@ -8,11 +8,16 @@ import { HostBubbles } from './HostBubbles' import { InputsTheme } from './InputsTheme' type Props = { + typebotId: string chatTheme: ChatTheme onChatThemeChange: (chatTheme: ChatTheme) => void } -export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => { +export const ChatThemeSettings = ({ + typebotId, + chatTheme, + onChatThemeChange, +}: Props) => { const handleHostBubblesChange = (hostBubbles: ContainerColors) => onChatThemeChange({ ...chatTheme, hostBubbles }) const handleGuestBubblesChange = (guestBubbles: ContainerColors) => @@ -30,12 +35,14 @@ export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => { return ( { {typebot && ( diff --git a/apps/builder/playwright/tests/accountSettings.spec.ts b/apps/builder/playwright/tests/accountSettings.spec.ts index 23cd95a71..8a3dea72e 100644 --- a/apps/builder/playwright/tests/accountSettings.spec.ts +++ b/apps/builder/playwright/tests/accountSettings.spec.ts @@ -21,7 +21,9 @@ test('should display user info properly', async ({ page }) => { await expect(page.locator('img >> nth=1')).toHaveAttribute( 'src', new RegExp( - `${process.env.S3_ENDPOINT}/${process.env.S3_BUCKET}/public/users/${userId}/avatar`, + `${process.env.S3_ENDPOINT}${ + process.env.S3_PORT ? `:${process.env.S3_PORT}` : '' + }/${process.env.S3_BUCKET}/public/users/${userId}/avatar`, 'gm' ) ) diff --git a/apps/builder/playwright/tests/bubbles/image.spec.ts b/apps/builder/playwright/tests/bubbles/image.spec.ts index de2a1cd4a..0a23e6438 100644 --- a/apps/builder/playwright/tests/bubbles/image.spec.ts +++ b/apps/builder/playwright/tests/bubbles/image.spec.ts @@ -32,10 +32,11 @@ test.describe.parallel('Image bubble block', () => { ) await expect(page.locator('img')).toHaveAttribute( 'src', - new RegExp( - `${process.env.S3_ENDPOINT}/${process.env.S3_BUCKET}/public/typebots/${typebotId}/avatar.jpg`, - 'gm' - ) + `${process.env.S3_SSL === 'false' ? 'http://' : 'https://'}${ + process.env.S3_ENDPOINT + }${process.env.S3_PORT ? `:${process.env.S3_PORT}` : ''}/${ + process.env.S3_BUCKET + }/public/typebots/${typebotId}/blocks/block1` ) }) diff --git a/package.json b/package.json index d8eda58d2..fe6eb10d6 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "apps/*" ], "scripts": { - "docker:up": "docker compose -f docker-compose.dev.yml up -d", + "docker:up": "docker compose -f docker-compose.dev.yml up -d && sleep 5", "docker:nuke": "docker compose -f docker-compose.dev.yml down --volumes --remove-orphans", "dev": "pnpm docker:up && NEXT_PUBLIC_E2E_TEST=false turbo run dev --filter=builder... --filter=viewer... --parallel --no-cache", "dev:mocking": "pnpm docker:up && NEXT_PUBLIC_E2E_TEST=true turbo run dev --filter=builder... --filter=viewer... --parallel --no-cache",