blsmedia/bot
2
0
Fork 0
Code Activity

📝 Add API share instructions

Browse Source 
Closes #331
This commit is contained in:
Baptiste Arnaud
2023-02-27 10:54:00 +01:00
parent 73ef12db72
commit eaf8024c84
4 changed files with 198 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx
View File

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

2
apps/builder/src/features/preview/components/PreviewDrawerBody.tsx
View File

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

28
apps/builder/src/features/publish/components/embeds/EmbedButton.tsx
View File

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

108
apps/builder/src/features/publish/components/embeds/modals/ApiModal.tsx Normal file
View File

@@ -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>
)
}