feat(engine): 💄 Add button ping if unique first

packages/bot-engine/src/assets/style.css

@@ -190,3 +190,7 @@ textarea {
 .typebot-chat-view {
   max-width: 800px;
 }
+
+.ping span {
+  background-color: var(--typebot-button-bg-color);
+}

packages/bot-engine/src/components/ChatBlock/ChatStep/inputs/ChoiceForm.tsx

@@ -1,3 +1,4 @@
+import { useAnswers } from 'contexts/AnswersContext'
 import { ChoiceInputStep } from 'models'
 import React, { useState } from 'react'
 import { SendButton } from './SendButton'
@@ -8,6 +9,7 @@ type ChoiceFormProps = {
 }
 
 export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
+  const { resultValues } = useAnswers()
   const [selectedIndices, setSelectedIndices] = useState<number[]>([])
 
   const handleClick = (itemIndex: number) => (e: React.MouseEvent) => {
@@ -33,24 +35,35 @@ export const ChoiceForm = ({ step, onSubmit }: ChoiceFormProps) => {
         .join(', ')
     )
 
+  const isUniqueFirstButton =
+    resultValues && resultValues.answers.length === 0 && step.items.length === 1
+
   return (
     <form className="flex flex-col" onSubmit={handleSubmit}>
       <div className="flex flex-wrap">
         {step.items.map((item, idx) => (
-          <button
-            key={item.id}
-            role={step.options?.isMultipleChoice ? 'checkbox' : 'button'}
-            onClick={handleClick(idx)}
-            className={
-              'py-2 px-4 text-left font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none mr-2 mb-2 typebot-button ' +
-              (selectedIndices.includes(idx) || !step.options?.isMultipleChoice
-                ? ''
-                : 'selectable')
-            }
-            data-testid="button"
-          >
-            {item.content}
-          </button>
+          <span key={item.id} className="relative inline-flex mr-2 mb-2">
+            <button
+              role={step.options?.isMultipleChoice ? 'checkbox' : 'button'}
+              onClick={handleClick(idx)}
+              className={
+                'py-2 px-4 text-left font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
+                (selectedIndices.includes(idx) ||
+                !step.options?.isMultipleChoice
+                  ? ''
+                  : 'selectable')
+              }
+              data-testid="button"
+            >
+              {item.content}
+            </button>
+            {isUniqueFirstButton && (
+              <span className="flex h-3 w-3 absolute top-0 right-0 -mt-1 -mr-1 ping">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full brightness-225 opacity-75" />
+                <span className="relative inline-flex rounded-full h-3 w-3 brightness-200" />
+              </span>
+            )}
+          </span>
         ))}
       </div>
       <div className="flex">

packages/bot-engine/tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
       screens: {
         xs: '400px',
       },
+      brightness: {
+        225: '2.25',
+      },
     },
   },
   plugins: [],