87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
import { Stack, Text } from '@chakra-ui/react'
|
|
import { CodeEditor } from 'components/shared/CodeEditor'
|
|
|
|
type Props = {
|
|
type: 'standard' | 'popup' | 'bubble'
|
|
}
|
|
|
|
export const ReactInstructions = ({ type }: Props) => {
|
|
switch (type) {
|
|
case 'standard': {
|
|
return <StandardInstructions />
|
|
}
|
|
case 'popup': {
|
|
return <PopupInstructions />
|
|
}
|
|
case 'bubble': {
|
|
return <BubbleInstructions />
|
|
}
|
|
}
|
|
}
|
|
|
|
const StandardInstructions = () => {
|
|
// const [inputValues, setInputValues] = useState({
|
|
// heightLabel: '100%',
|
|
// widthLabel: '100%',
|
|
// })
|
|
|
|
return (
|
|
<Stack spacing={4}>
|
|
{/* <InstallPackageInstruction /> */}
|
|
{/* <StandardEmbedWindowSettings
|
|
onUpdateWindowSettings={(settings) => setInputValues({ ...settings })}
|
|
/> */}
|
|
{/* <Text>{t('insert-the-typebot-container')}</Text>
|
|
<StandardReactDiv {...inputValues} /> */}
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
const PopupInstructions = () => {
|
|
// const [inputValue, setInputValue] = useState(0)
|
|
|
|
return (
|
|
<Stack spacing={4}>
|
|
{/* <InstallPackageInstruction />
|
|
<PopupEmbedSettings
|
|
onUpdateSettings={(settings) => setInputValue(settings.delay ?? 0)}
|
|
/>
|
|
<Text>{t('initialize-the-typebot')}</Text>
|
|
<PopupReactCode withStarterVariables={true} delay={inputValue} /> */}
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
const BubbleInstructions = () => {
|
|
// const { t } = useTranslation()
|
|
// const [inputValues, setInputValues] = useState<
|
|
// Pick<BubbleParams, 'proactiveMessage' | 'button'>
|
|
// >({
|
|
// proactiveMessage: undefined,
|
|
// button: {
|
|
// color: '',
|
|
// iconUrl: '',
|
|
// },
|
|
// })
|
|
|
|
return (
|
|
<Stack spacing={4}>
|
|
{/* <InstallPackageInstruction />
|
|
<ChatEmbedSettings
|
|
onUpdateSettings={(settings) => setInputValues({ ...settings })}
|
|
/>
|
|
<Text>{t('initialize-the-typebot')}</Text>
|
|
<ChatReactCode withStarterVariables={true} {...inputValues} mt={4} /> */}
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
const InstallPackageInstruction = () => {
|
|
return (
|
|
<Stack>
|
|
<Text>Install the package:</Text>
|
|
<CodeEditor value={`npm install typebot-js`} isReadOnly />
|
|
</Stack>
|
|
)
|
|
}
|