📝 Add API share instructions

Closes #331

apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx

@@ -2,10 +2,17 @@ import { CodeEditor } from '@/components/CodeEditor'
 import { TextLink } from '@/components/TextLink'
 import { useEditor } from '@/features/editor/providers/EditorProvider'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { Code, ListItem, OrderedList, Stack, Text } from '@chakra-ui/react'
+import {
+  Code,
+  ListItem,
+  OrderedList,
+  Stack,
+  StackProps,
+  Text,
+} from '@chakra-ui/react'
 import { env, getViewerUrl } from 'utils'
 
-export const ApiPreviewInstructions = () => {
+export const ApiPreviewInstructions = (props: StackProps) => {
   const { typebot } = useTypebot()
   const { startPreviewAtGroup } = useEditor()
 
@@ -30,60 +37,69 @@ export const ApiPreviewInstructions = () => {
 }`
 
   return (
-    <OrderedList
-      p="4"
-      spacing={6}
-      w="full"
+    <Stack
+      spacing={10}
       overflowY="scroll"
       className="hide-scrollbar"
+      w="full"
+      {...props}
     >
-      <ListItem>
-        All your requests need to be authenticated with an API token.{' '}
-        <TextLink href="https://docs.typebot.io/api/builder/authenticate">
-          See instructions
-        </TextLink>
-        .
-      </ListItem>
-      <ListItem>
-        <Stack>
-          <Text>
-            To start the chat, send a <Code>POST</Code> request to
-          </Text>
-          <CodeEditor
-            isReadOnly
-            lang={'shell'}
-            value={`${
-              env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-            }/api/v1/sendMessage`}
-          />
-          <Text>with the following JSON body:</Text>
-          <CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
-        </Stack>
-      </ListItem>
-      <ListItem>
-        The first response will contain a <Code>sessionId</Code> that you will
-        need for subsequent requests.
-      </ListItem>
-      <ListItem>
-        <Stack>
-          <Text>
-            To send replies, send <Code>POST</Code> requests to
-          </Text>
-          <CodeEditor
-            isReadOnly
-            lang={'shell'}
-            value={`${
-              env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-            }/api/v1/sendMessage`}
-          />
-          <Text>With the following JSON body:</Text>
-          <CodeEditor isReadOnly lang={'json'} value={replyBody} />
-          <Text>
-            Replace <Code>{'<ID_FROM_FIRST_RESPONSE>'}</Code> with{' '}
-            <Code>sessionId</Code>.
-          </Text>
-        </Stack>
-      </ListItem>
-    </OrderedList>
+      <OrderedList spacing={6}>
+        <ListItem>
+          All your requests need to be authenticated with an API token.{' '}
+          <TextLink href="https://docs.typebot.io/api/builder/authenticate">
+            See instructions
+          </TextLink>
+          .
+        </ListItem>
+        <ListItem>
+          <Stack>
+            <Text>
+              To start the chat, send a <Code>POST</Code> request to
+            </Text>
+            <CodeEditor
+              isReadOnly
+              lang={'shell'}
+              value={`${
+                env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+              }/api/v1/sendMessage`}
+            />
+            <Text>with the following JSON body:</Text>
+            <CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
+          </Stack>
+        </ListItem>
+        <ListItem>
+          The first response will contain a <Code>sessionId</Code> that you will
+          need for subsequent requests.
+        </ListItem>
+        <ListItem>
+          <Stack>
+            <Text>
+              To send replies, send <Code>POST</Code> requests to
+            </Text>
+            <CodeEditor
+              isReadOnly
+              lang={'shell'}
+              value={`${
+                env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+              }/api/v1/sendMessage`}
+            />
+            <Text>With the following JSON body:</Text>
+            <CodeEditor isReadOnly lang={'json'} value={replyBody} />
+            <Text>
+              Replace <Code>{'<ID_FROM_FIRST_RESPONSE>'}</Code> with{' '}
+              <Code>sessionId</Code>.
+            </Text>
+          </Stack>
+        </ListItem>
+      </OrderedList>
+      <Text fontSize="sm">
+        Check out the{' '}
+        <TextLink href="https://docs.typebot.io/api/send-a-message" isExternal>
+          API reference
+        </TextLink>{' '}
+        for more information
+      </Text>
+    </Stack>
   )
 }

apps/builder/src/features/preview/components/PreviewDrawerBody.tsx

@@ -12,7 +12,7 @@ export const PreviewDrawerBody = ({ runtime }: Props) => {
       return <WebPreview />
     }
     case 'API': {
-      return <ApiPreviewInstructions />
+      return <ApiPreviewInstructions pt="4" />
     }
   }
 }

apps/builder/src/features/publish/components/embeds/EmbedButton.tsx

@@ -33,6 +33,8 @@ import {
 import { OtherModal } from './modals/OtherModal'
 import { ScriptIcon } from '@/features/blocks/logic/script'
 import { ScriptModal } from './modals/Script/ScriptModal'
+import { CodeIcon } from '@/components/icons'
+import { ApiModal } from './modals/ApiModal'
 
 export type ModalProps = {
   publicId: string
@@ -123,15 +125,9 @@ export const integrationsList = [
   ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
-      logo={
-        <ScriptIcon
-          height={100}
-          width="70px"
-          color={useColorModeValue('gray.800', 'gray.300')}
-        />
-      }
-      label="Script"
-      Modal={ScriptModal}
+      logo={<CodeIcon height={100} width="60px" />}
+      label="API"
+      Modal={ApiModal}
       {...props}
     />
   ),
@@ -151,6 +147,20 @@ export const integrationsList = [
       {...props}
     />
   ),
+  (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
+    <EmbedButton
+      logo={
+        <ScriptIcon
+          height={100}
+          width="70px"
+          color={useColorModeValue('gray.800', 'gray.300')}
+        />
+      }
+      label="Script"
+      Modal={ScriptModal}
+      {...props}
+    />
+  ),
   (props: Pick<ModalProps, 'publicId' | 'isPublished'>) => (
     <EmbedButton
       logo={<IframeLogo height={100} width="70px" />}

apps/builder/src/features/publish/components/embeds/modals/ApiModal.tsx

@@ -0,0 +1,108 @@
+import { AlertInfo } from '@/components/AlertInfo'
+import { CodeEditor } from '@/components/CodeEditor'
+import { TextLink } from '@/components/TextLink'
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  Heading,
+  ModalCloseButton,
+  ModalBody,
+  OrderedList,
+  ListItem,
+  Code,
+  ModalFooter,
+  Text,
+  Stack,
+} from '@chakra-ui/react'
+import { env, getViewerUrl } from 'utils'
+import { ModalProps } from '../EmbedButton'
+
+export const ApiModal = ({
+  isPublished,
+  publicId,
+  isOpen,
+  onClose,
+}: ModalProps): JSX.Element => {
+  const startParamsBody = `{
+  "startParams": {
+    "typebot": "${publicId}",
+  }
+}`
+
+  const replyBody = `{
+  "message": "This is my reply",
+  "sessionId": "<ID_FROM_FIRST_RESPONSE>"
+}`
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Heading size="md">API</Heading>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody as={Stack} spacing="6">
+          {!isPublished && (
+            <AlertInfo>You need to publish your bot first.</AlertInfo>
+          )}
+          <OrderedList spacing={4} pl="4">
+            <ListItem>
+              <Stack>
+                <Text>
+                  To start the chat, send a <Code>POST</Code> request to
+                </Text>
+                <CodeEditor
+                  isReadOnly
+                  lang={'shell'}
+                  value={`${
+                    env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+                  }/api/v1/sendMessage`}
+                />
+                <Text>with the following JSON body:</Text>
+                <CodeEditor isReadOnly lang={'json'} value={startParamsBody} />
+              </Stack>
+            </ListItem>
+            <ListItem>
+              The first response will contain a <Code>sessionId</Code> that you
+              will need for subsequent requests.
+            </ListItem>
+            <ListItem>
+              <Stack>
+                <Text>
+                  To send replies, send <Code>POST</Code> requests to
+                </Text>
+                <CodeEditor
+                  isReadOnly
+                  lang={'shell'}
+                  value={`${
+                    env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+                  }/api/v1/sendMessage`}
+                />
+                <Text>With the following JSON body:</Text>
+                <CodeEditor isReadOnly lang={'json'} value={replyBody} />
+                <Text>
+                  Replace <Code>{'<ID_FROM_FIRST_RESPONSE>'}</Code> with{' '}
+                  <Code>sessionId</Code>.
+                </Text>
+              </Stack>
+            </ListItem>
+          </OrderedList>
+          <Text fontSize="sm" colorScheme="gray">
+            Check out the{' '}
+            <TextLink
+              href="https://docs.typebot.io/api/send-a-message"
+              isExternal
+            >
+              API reference
+            </TextLink>{' '}
+            for more information
+          </Text>
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}