diff --git a/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx b/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx
deleted file mode 100644
index 20bc17c13..000000000
--- a/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-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'
-import { env } from 'utils'
-
-type GiphySearchProps = {
- onSubmit: (url: string) => void
-}
-
-const giphyFetch = new GiphyFetch(env('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 (
-
-
- setInputValue(e.target.value)}
- value={inputValue}
- />
-
-
-
- {
- e.preventDefault()
- updateUrl(gif.images.downsized.url)
- }}
- key={searchKey}
- fetchGifs={searchKey === '' ? fetchGifsTrending : fetchGifs}
- width={475}
- columns={3}
- className="my-4"
- />
-
-
- )
-}
diff --git a/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx b/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx
new file mode 100644
index 000000000..98f650437
--- /dev/null
+++ b/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx
@@ -0,0 +1,54 @@
+import { Flex, Stack, Text } from '@chakra-ui/react'
+import { GiphyFetch } from '@giphy/js-fetch-api'
+import { Grid } from '@giphy/react-components'
+import { GiphyLogo } from 'assets/logos'
+import React, { useState } from 'react'
+import { env, isEmpty } from 'utils'
+import { Input } from '../Textbox'
+
+type GiphySearchFormProps = {
+ onSubmit: (url: string) => void
+}
+
+const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
+
+export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
+ const [inputValue, setInputValue] = useState('')
+
+ const fetchGifs = (offset: number) =>
+ giphyFetch.search(inputValue, { offset, limit: 10 })
+
+ const fetchGifsTrending = (offset: number) =>
+ giphyFetch.trending({ offset, limit: 10 })
+
+ return isEmpty(env('GIPHY_API_KEY')) ? (
+ NEXT_PUBLIC_GIPHY_API_KEY is missing in environment
+ ) : (
+
+
+
+
+
+
+ {
+ e.preventDefault()
+ onSubmit(gif.images.downsized.url)
+ }}
+ fetchGifs={inputValue === '' ? fetchGifsTrending : fetchGifs}
+ width={475}
+ columns={3}
+ className="my-4"
+ />
+
+
+ )
+}
diff --git a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
index 5b04fddbd..45435f1f8 100644
--- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
@@ -1,11 +1,9 @@
import { useState } from 'react'
-import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
-import { SearchContextManager } from '@giphy/react-components'
+import { Button, Flex, HStack, Stack } from '@chakra-ui/react'
import { UploadButton } from '../buttons/UploadButton'
-import { GiphySearch } from './GiphySearch'
+import { GiphySearchForm } from './GiphySearchForm'
import { useTypebot } from 'contexts/TypebotContext'
import { Input } from '../Textbox/Input'
-import { env, isEmpty } from 'utils'
import { EmojiSearchableList } from './emoji/EmojiSearchableList'
type Props = {
@@ -123,12 +121,6 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => (
)
-const GiphyContent = ({ onNewUrl }: ContentProps) => {
- if (isEmpty(env('GIPHY_API_KEY')))
- return NEXT_PUBLIC_GIPHY_API_KEY is missing in environment
- return (
-
-
-
- )
-}
+const GiphyContent = ({ onNewUrl }: ContentProps) => (
+
+)
diff --git a/apps/builder/package.json b/apps/builder/package.json
index 20f798ba8..13dc556e0 100644
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@@ -85,7 +85,7 @@
},
"devDependencies": {
"@babel/core": "7.18.10",
- "@playwright/test": "1.24.2",
+ "@playwright/test": "1.25.0",
"@types/canvas-confetti": "^1.4.3",
"@types/google-spreadsheet": "^3.3.0",
"@types/jsonwebtoken": "8.5.8",
diff --git a/apps/builder/playwright/tests/bubbles/image.spec.ts b/apps/builder/playwright/tests/bubbles/image.spec.ts
index 3cb2c346c..de1b3b851 100644
--- a/apps/builder/playwright/tests/bubbles/image.spec.ts
+++ b/apps/builder/playwright/tests/bubbles/image.spec.ts
@@ -83,7 +83,23 @@ test.describe.parallel('Image bubble block', () => {
await page.click('text=Click to edit...')
await page.click('text=Giphy')
- await page.click('img >> nth=3', {
+ const firstGiphyImage = page.locator('.giphy-gif-img >> nth=0')
+ await expect(firstGiphyImage).toHaveAttribute(
+ 'src',
+ new RegExp('giphy.com/media', 'gm')
+ )
+ const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src')
+ expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+ await page.fill('[placeholder="Search..."]', 'fun')
+ await page.waitForTimeout(500)
+ await expect(firstGiphyImage).toHaveAttribute(
+ 'src',
+ new RegExp('giphy.com/media', 'gm')
+ )
+ const funFirstImageSrc = await firstGiphyImage.getAttribute('src')
+ expect(funFirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+ expect(trendingfirstImageSrc).not.toBe(funFirstImageSrc)
+ await firstGiphyImage.click({
force: true,
position: { x: 0, y: 0 },
})
diff --git a/apps/viewer/package.json b/apps/viewer/package.json
index 261af9c65..538b70f4a 100644
--- a/apps/viewer/package.json
+++ b/apps/viewer/package.json
@@ -30,7 +30,7 @@
},
"devDependencies": {
"@types/papaparse": "5.3.3",
- "@playwright/test": "1.24.2",
+ "@playwright/test": "1.25.0",
"eslint-plugin-react": "^7.30.1",
"@types/cors": "^2.8.12",
"@types/google-spreadsheet": "^3.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 609fc85f4..8a4a06182 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,7 +28,7 @@ importers:
'@giphy/js-types': ^4.2.1
'@giphy/react-components': 6.0.0
'@googleapis/drive': ^3.0.1
- '@playwright/test': 1.24.2
+ '@playwright/test': 1.25.0
'@sentry/nextjs': 7.9.0
'@stripe/stripe-js': 1.35.0
'@tanstack/react-table': 8.5.11
@@ -179,7 +179,7 @@ importers:
use-debounce: 8.0.3_react@18.2.0
devDependencies:
'@babel/core': 7.18.10
- '@playwright/test': 1.24.2
+ '@playwright/test': 1.25.0
'@types/canvas-confetti': 1.4.3
'@types/google-spreadsheet': 3.3.0
'@types/jsonwebtoken': 8.5.8
@@ -299,7 +299,7 @@ importers:
apps/viewer:
specifiers:
- '@playwright/test': 1.24.2
+ '@playwright/test': 1.25.0
'@sentry/nextjs': 7.9.0
'@types/cors': ^2.8.12
'@types/google-spreadsheet': ^3.3.0
@@ -351,7 +351,7 @@ importers:
sanitize-html: 2.7.1
stripe: 10.0.0
devDependencies:
- '@playwright/test': 1.24.2
+ '@playwright/test': 1.25.0
'@types/cors': 2.8.12
'@types/google-spreadsheet': 3.3.0
'@types/node': 18.6.5
@@ -5788,13 +5788,13 @@ packages:
resolution: {integrity: sha512-MSAs9t3Go7GUkMhpKC44T58DJ5KGk2vBo+h1cqQeqlMfdGkxaVB78ZWpv9gYi/g2fa4sopag9gJsNvS8XGgWJA==}
dev: false
- /@playwright/test/1.24.2:
- resolution: {integrity: sha512-Q4X224pRHw4Dtkk5PoNJplZCokLNvVbXD9wDQEMrHcEuvWpJWEQDeJ9gEwkZ3iCWSFSWBshIX177B231XW4wOQ==}
+ /@playwright/test/1.25.0:
+ resolution: {integrity: sha512-j4EZhTTQI3dBeWblE21EV//swwmBtOpIrLdOIJIRv4uqsLdHgBg1z+JtTg+AeC5o2bAXIE26kDNW5A0TimG8Bg==}
engines: {node: '>=14'}
hasBin: true
dependencies:
'@types/node': 18.6.5
- playwright-core: 1.24.2
+ playwright-core: 1.25.0
dev: true
/@polka/url/1.0.0-next.21:
@@ -14226,8 +14226,8 @@ packages:
find-up: 3.0.0
dev: false
- /playwright-core/1.24.2:
- resolution: {integrity: sha512-zfAoDoPY/0sDLsgSgLZwWmSCevIg1ym7CppBwllguVBNiHeixZkc1AdMuYUPZC6AdEYc4CxWEyLMBTw2YcmRrA==}
+ /playwright-core/1.25.0:
+ resolution: {integrity: sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==}
engines: {node: '>=14'}
hasBin: true
dev: true