feat: 🎸 Disable init message on bubble

gmpetrov · Oct 4, 2023 · 1decf8d · 1decf8d
1 parent 40125e1
commit 1decf8d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/components/AgentInputs/CommonInterfaceInput.tsx b/components/AgentInputs/CommonInterfaceInput.tsx
@@ -3,19 +3,21 @@ import { useFormContext } from 'react-hook-form';
 
 import Input from '@app/components/Input';
 
+import InitialBubbleMessageCheckbox from './InitialBubbleMessageCheckbox';
 import InitMessageInput from './InitMessageInput';
 import SuggestionsInput from './SuggestionsInput';
 
 type Props = {};
 
 export default function CommonInterfaceInput(props: Props) {
-  const { watch, control, register, setValue } = useFormContext();
+  const { watch, control, register } = useFormContext();
 
   const config = watch('interfaceConfig');
 
   return (
     <>
       <InitMessageInput />
+      <InitialBubbleMessageCheckbox />
       <SuggestionsInput />
       <Input
         control={control}

diff --git a/components/AgentInputs/InitialBubbleMessageCheckbox.tsx b/components/AgentInputs/InitialBubbleMessageCheckbox.tsx
@@ -0,0 +1,28 @@
+import { Checkbox, Stack, Typography } from "@mui/joy";
+import { useFormContext } from "react-hook-form";
+
+function InitialBubbleMessageCheckbox({ labelText = "Hide initial message on chat bubble" }) {
+    const { register, setValue, getValues } = useFormContext();
+    const { interfaceConfig } = getValues()
+    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue('interfaceConfig.isInitMessagePopupDisabled', e.target.checked, {
+            shouldDirty: true,
+            shouldValidate: true,
+        });
+    };
+    return (
+        <Stack direction="row" spacing={1} alignItems="center">
+            <Checkbox
+                {...register('interfaceConfig.isInitMessagePopupDisabled')}
+                onChange={handleCheckboxChange}
+                checked={Boolean(interfaceConfig?.isInitMessagePopupDisabled)}
+                aria-label={labelText}
+            />
+            <Typography>{labelText}</Typography>
+        </Stack>
+    );
+}
+
+
+
+export default InitialBubbleMessageCheckbox;
diff --git a/components/ChatBubble.tsx b/components/ChatBubble.tsx
@@ -139,7 +139,7 @@ function App(props: { agentId: string; initConfig?: AgentInterfaceConfig }) {
   }, [props.agentId]);
 
   useEffect(() => {
-    if (state.config?.initialMessage) {
+    if (state.config?.initialMessage && !state.config?.isInitMessagePopupDisabled) {
       setTimeout(() => {
         setState({
           showInitialMessage: true,

diff --git a/types/models.ts b/types/models.ts
@@ -58,6 +58,7 @@ export const AgentInterfaceConfig = z.object({
     })
     .optional(),
   initialMessage: z.string().trim().optional(),
+  isInitMessagePopupDisabled: z.boolean().optional(),
   messageTemplates: z.array(z.string()).optional(),
   position: z.enum(['left', 'right']).optional(),
   authorizedDomains: z.array(z.string()).optional(),