🐛 (attachments) Fix attachments on mobile and fix long text…

Closes #1611, closes #1610

packages/embeds/js/package.json

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

packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -1,4 +1,4 @@
-import { BotContext, ChatChunk as ChatChunkType } from '@/types'
+import { Answer, BotContext, ChatChunk as ChatChunkType } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import { ContinueChatResponse, Settings, Theme } from '@typebot.io/schemas'
 import { createSignal, For, onMount, Show } from 'solid-js'
@@ -23,7 +23,7 @@ type Props = Pick<ContinueChatResponse, 'messages' | 'input'> & {
   isTransitionDisabled?: boolean
   onNewBubbleDisplayed: (blockId: string) => Promise<void>
   onScrollToBottom: (ref?: HTMLDivElement, offset?: number) => void
-  onSubmit: (input?: string) => void
+  onSubmit: (answer?: string, attachments?: Answer['attachments']) => void
   onSkip: () => void
   onAllBubblesDisplayed: () => void
 }

packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx

@@ -15,7 +15,12 @@ import {
 } from 'solid-js'
 import { continueChatQuery } from '@/queries/continueChatQuery'
 import { ChatChunk } from './ChatChunk'
-import { BotContext, ChatChunk as ChatChunkType, OutgoingLog } from '@/types'
+import {
+  Answer,
+  BotContext,
+  ChatChunk as ChatChunkType,
+  OutgoingLog,
+} from '@/types'
 import { isNotDefined } from '@typebot.io/lib'
 import { executeClientSideAction } from '@/utils/executeClientSideActions'
 import { LoadingChunk } from './LoadingChunk'
@@ -137,7 +142,10 @@ export const ConversationContainer = (props: Props) => {
     })
   }
 
-  const sendMessage = async (message: string | undefined) => {
+  const sendMessage = async (
+    message?: string,
+    attachments?: Answer['attachments']
+  ) => {
     setHasError(false)
     const currentInputBlock = [...chatChunks()].pop()?.input
     if (currentInputBlock?.id && props.onAnswer && message)
@@ -149,7 +157,13 @@ export const ConversationContainer = (props: Props) => {
     const { data, error } = await continueChatQuery({
       apiHost: props.context.apiHost,
       sessionId: props.initialChatReply.sessionId,
-      message,
+      message: message
+        ? {
+            type: 'text',
+            text: message,
+            attachedFileUrls: attachments?.map((attachment) => attachment.url),
+          }
+        : undefined,
     })
     clearTimeout(longRequest)
     setIsSending(false)

packages/embeds/js/src/components/TextInputAddFileButton.tsx

@@ -1,6 +1,5 @@
-import { Show } from 'solid-js'
+import { Match, Switch } from 'solid-js'
 import { Menu } from '@ark-ui/solid'
-import { CameraIcon } from './icons/CameraIcon'
 import { FileIcon } from './icons/FileIcon'
 import { PictureIcon } from './icons/PictureIcon'
 import { isMobile } from '@/utils/isMobileSignal'
@@ -35,69 +34,62 @@ export const TextInputAddFileButton = (props: Props) => {
           props.onNewFiles(e.currentTarget.files)
         }}
       />
-      <Show when={isMobile()}>
-        <input
-          type="file"
-          id="camera-upload"
-          class="hidden"
-          multiple
-          accept="image/*"
-          capture="environment"
-          onChange={(e) => {
-            if (!e.currentTarget.files) return
-            props.onNewFiles(e.currentTarget.files)
-          }}
-        />
-      </Show>
 
-      <Menu.Root>
+      <Switch>
-        <Menu.Trigger
+        <Match when={isMobile()}>
-          class={clsx(
+          <label
-            'filter data-[state=open]:backdrop-brightness-90 hover:backdrop-brightness-95 transition rounded-md p-2 focus:outline-none',
+            aria-label="Add attachments"
-            props.class
+            for="document-upload"
-          )}
+            class={clsx(
-          aria-label="Add attachments"
+              'filter data-[state=open]:backdrop-brightness-90 hover:backdrop-brightness-95 transition rounded-md p-2 focus:outline-none',
-        >
+              props.class
-          <PaperClipIcon class="w-5" />
+            )}
-        </Menu.Trigger>
+          >
-        <Menu.Positioner>
+            <PaperClipIcon class="w-5" />
-          <Menu.Content class="p-3 gap-2 focus:outline-none">
+          </label>
-            <Menu.Item
+        </Match>
-              value="document"
+        <Match when={true}>
-              asChild={(props) => (
+          <Menu.Root>
-                <label
+            <Menu.Trigger
-                  {...props()}
+              class={clsx(
-                  for="document-upload"
+                'filter data-[state=open]:backdrop-brightness-90 hover:backdrop-brightness-95 transition rounded-md p-2 focus:outline-none',
-                  class="p-2 filter hover:brightness-95 flex gap-3 items-center"
+                props.class
-                >
-                  <FileIcon class="w-4" /> Document
-                </label>
               )}
-            />
+              aria-label="Add attachments"
-            <Menu.Item
+            >
-              value="photos"
+              <PaperClipIcon class="w-5" />
-              asChild={(props) => (
+            </Menu.Trigger>
-                <label
+            <Menu.Positioner>
-                  {...props()}
+              <Menu.Content class="p-3 gap-2 focus:outline-none">
-                  for="photos-upload"
+                <Menu.Item
-                  class="p-2 filter hover:brightness-95 flex gap-3 items-center"
+                  value="document"
-                >
+                  asChild={(props) => (
-                  <PictureIcon class="w-4" /> Photos & videos
+                    <label
-                </label>
+                      {...props()}
-              )}
+                      for="document-upload"
-            />
+                      class="p-2 filter hover:brightness-95 flex gap-3 items-center"
-            <Show when={isMobile()}>
+                    >
-              <Menu.Item
+                      <FileIcon class="w-4" /> Document
-                value="camera"
+                    </label>
-                class="p-2 filter hover:brightness-95 flex gap-3 items-center"
+                  )}
-              >
+                />
-                <CameraIcon class="w-4" />
+                <Menu.Item
-                Camera
+                  value="photos"
-              </Menu.Item>
+                  asChild={(props) => (
-            </Show>
+                    <label
-          </Menu.Content>
+                      {...props()}
-        </Menu.Positioner>
+                      for="photos-upload"
-      </Menu.Root>
+                      class="p-2 filter hover:brightness-95 flex gap-3 items-center"
+                    >
+                      <PictureIcon class="w-4" /> Photos & videos
+                    </label>
+                  )}
+                />
+              </Menu.Content>
+            </Menu.Positioner>
+          </Menu.Root>
+        </Match>
+      </Switch>
     </>
   )
 }

packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -139,7 +139,10 @@ export const TextInput = (props: Props) => {
 
   return (
     <div
-      class="typebot-input-form flex w-full gap-2 items-end max-w-[350px]"
+      class={clsx(
+        'typebot-input-form flex w-full gap-2 items-end',
+        props.block.options?.isLong ? 'max-w-full' : 'max-w-[350px]'
+      )}
       onKeyDown={submitWhenEnter}
       onDrop={handleDropFile}
       onDragOver={handleDragOver}

packages/embeds/js/src/queries/continueChatQuery.ts

@@ -1,6 +1,6 @@
 import { guessApiHost } from '@/utils/guessApiHost'
 import { isNotEmpty } from '@typebot.io/lib'
-import { ContinueChatResponse } from '@typebot.io/schemas'
+import { ContinueChatResponse, Message } from '@typebot.io/schemas'
 import ky from 'ky'
 
 export const continueChatQuery = async ({
@@ -9,7 +9,7 @@ export const continueChatQuery = async ({
   sessionId,
 }: {
   apiHost?: string
-  message: string | undefined
+  message?: Message
   sessionId: string
 }) => {
   try {

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

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