✨ Add Zemantic AI Integration block (#752)

Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>

.gitignore

@@ -36,4 +36,4 @@ typebotsToFix.json
 snapshots
 
 .env
-.typebot-build
+.typebot-build

apps/builder/src/components/inputs/NumberInput.tsx

@@ -99,9 +99,10 @@ export const NumberInput = <HasVariable extends boolean>({
       isRequired={isRequired}
       justifyContent="space-between"
       width={label ? 'full' : 'auto'}
+      spacing={0}
     >
       {label && (
-        <FormLabel mb="0" flexShrink={0}>
+        <FormLabel mb="2" flexShrink={0}>
           {label}{' '}
           {moreInfoTooltip && (
             <MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>

apps/builder/src/features/blocks/integrations/zemanticAi/ProjectsDropdown.tsx

@@ -0,0 +1,47 @@
+import { Select } from '@/components/inputs/Select'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { useToast } from '@/hooks/useToast'
+import { trpc } from '@/lib/trpc'
+
+type Props = {
+  credentialsId: string
+  blockId: string
+  defaultValue: string
+  onChange: (projectId: string | undefined) => void
+}
+
+export const ProjectsDropdown = ({
+  defaultValue,
+  onChange,
+  credentialsId,
+}: Props) => {
+  const { typebot } = useTypebot()
+  const { workspace } = useWorkspace()
+  const { showToast } = useToast()
+
+  const { data } = trpc.zemanticAi.listProjects.useQuery(
+    {
+      credentialsId,
+      workspaceId: workspace?.id as string,
+    },
+    {
+      enabled: !!typebot && !!workspace,
+      onError: (error) => {
+        showToast({
+          description: error.message,
+          status: 'error',
+        })
+      },
+    }
+  )
+
+  return (
+    <Select
+      items={data?.projects as { label: string; value: string }[]}
+      selectedItem={defaultValue}
+      onSelect={onChange}
+      placeholder="Select a project"
+    />
+  )
+}

apps/builder/src/features/blocks/integrations/zemanticAi/SearchResponseItem.tsx

@@ -0,0 +1,37 @@
+import { DropdownList } from '@/components/DropdownList'
+import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
+import { TableListItemProps } from '@/components/TableList'
+import { Stack } from '@chakra-ui/react'
+import { Variable } from '@typebot.io/schemas'
+import {
+  ZemanticAiOptions,
+  searchResponseValues,
+} from '@typebot.io/schemas/features/blocks/integrations/zemanticAi'
+
+type Props = TableListItemProps<ZemanticAiOptions['responseMapping'][number]>
+
+export const SearchResponseItem = ({ item, onItemChange }: Props) => {
+  const changeValueToExtract = (
+    valueToExtract: (typeof searchResponseValues)[number]
+  ) => {
+    onItemChange({ ...item, valueToExtract })
+  }
+
+  const changeVariableId = (variable: Pick<Variable, 'id'> | undefined) => {
+    onItemChange({ ...item, variableId: variable ? variable.id : undefined })
+  }
+
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <DropdownList
+        currentItem={item.valueToExtract ?? 'Summary'}
+        items={searchResponseValues}
+        onItemSelect={changeValueToExtract}
+      />
+      <VariableSearchInput
+        onSelectVariable={changeVariableId}
+        initialVariableId={item.variableId}
+      />
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/integrations/zemanticAi/ZemanticAiCredentialsModal.tsx

@@ -0,0 +1,125 @@
+import { TextInput } from '@/components/inputs/TextInput'
+import { TextLink } from '@/components/TextLink'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { useToast } from '@/hooks/useToast'
+import { trpc } from '@/lib/trpc'
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Stack,
+  ModalFooter,
+  Button,
+} from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+const zemanticAIDashboardPage = 'https://zemantic.ai/dashboard/settings'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onNewCredentials: (id: string) => void
+}
+
+export const ZemanticAiCredentialsModal = ({
+  isOpen,
+  onClose,
+  onNewCredentials,
+}: Props) => {
+  const { workspace } = useWorkspace()
+  const { showToast } = useToast()
+  const [apiKey, setApiKey] = useState('')
+  const [name, setName] = useState('')
+
+  const [isCreating, setIsCreating] = useState(false)
+
+  const {
+    credentials: {
+      listCredentials: { refetch: refetchCredentials },
+    },
+  } = trpc.useContext()
+  const { mutate } = trpc.credentials.createCredentials.useMutation({
+    onMutate: () => setIsCreating(true),
+    onSettled: () => setIsCreating(false),
+    onError: (err) => {
+      showToast({
+        description: err.message,
+        status: 'error',
+      })
+    },
+    onSuccess: (data) => {
+      refetchCredentials()
+      onNewCredentials(data.credentialsId)
+      onClose()
+    },
+  })
+
+  const createZemanticAiCredentials = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!workspace) return
+    mutate({
+      credentials: {
+        type: 'zemanticAi',
+        workspaceId: workspace.id,
+        name,
+        data: {
+          apiKey,
+        },
+      },
+    })
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Add Zemantic AI account</ModalHeader>
+        <ModalCloseButton />
+        <form onSubmit={createZemanticAiCredentials}>
+          <ModalBody as={Stack} spacing="6">
+            <TextInput
+              isRequired
+              label="Name"
+              onChange={setName}
+              placeholder="My account"
+              withVariableButton={false}
+              debounceTimeout={0}
+            />
+            <TextInput
+              isRequired
+              type="password"
+              label="API key"
+              helperText={
+                <>
+                  You can generate an API key{' '}
+                  <TextLink href={zemanticAIDashboardPage} isExternal>
+                    here
+                  </TextLink>
+                  .
+                </>
+              }
+              onChange={setApiKey}
+              placeholder="ze..."
+              withVariableButton={false}
+              debounceTimeout={0}
+            />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              type="submit"
+              isLoading={isCreating}
+              isDisabled={apiKey === '' || name === ''}
+              colorScheme="blue"
+            >
+              Create
+            </Button>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  )
+}

apps/builder/src/features/blocks/integrations/zemanticAi/ZemanticAiLogo.tsx

@@ -0,0 +1,21 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const ZemanticAiLogo = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...props}>
+    <g transform="matrix(.049281 0 0 .064343 -.27105 -3.4424)">
+      <path
+        d="m99.5 205.5v221h-94v-373h94v152z"
+        fill="#8771b1"
+        opacity=".991"
+      />
+      <path
+        d="m284.5 426.5v-221-152h94v373h-94z"
+        fill="#f05b4e"
+        opacity=".99"
+      />
+      <path d="m99.5 205.5h93v221h-93v-221z" fill="#ec9896" />
+      <path d="m192.5 205.5h92v221h-92v-221z" fill="#efe894" />
+      <path d="m398.5 298.5h94v128h-94v-128z" fill="#46bb91" opacity=".989" />
+    </g>
+  </Icon>
+)

apps/builder/src/features/blocks/integrations/zemanticAi/ZemanticAiNodeBody.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Stack, Text } from '@chakra-ui/react'
+import { ZemanticAiOptions } from '@typebot.io/schemas'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { SetVariableLabel } from '@/components/SetVariableLabel'
+
+type Props = {
+  options: ZemanticAiOptions
+}
+
+export const ZemanticAiNodeBody = ({
+  options: { query, projectId, responseMapping },
+}: Props) => {
+  const { typebot } = useTypebot()
+  return (
+    <Stack>
+      <Text
+        color={query && projectId ? 'currentcolor' : 'gray.500'}
+        noOfLines={1}
+      >
+        {query && projectId ? `Ask: ${query}` : 'Configure...'}
+      </Text>
+      {typebot &&
+        responseMapping
+          .map((mapping) => mapping.variableId)
+          .map((variableId, idx) =>
+            variableId ? (
+              <SetVariableLabel
+                key={variableId + idx}
+                variables={typebot.variables}
+                variableId={variableId}
+              />
+            ) : null
+          )}
+    </Stack>
+  )
+}