🚀 Init preview and typebot cotext in editor

apps/builder/components/shared/KBar.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  KBarPortal,
+  KBarPositioner,
+  KBarAnimator,
+  KBarSearch,
+  KBarResults,
+  useMatches,
+} from 'kbar'
+import { chakra, Flex } from '@chakra-ui/react'
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type KBarProps = {}
+
+const KBarSearchChakra = chakra(KBarSearch)
+const KBarAnimatorChakra = chakra(KBarAnimator)
+const KBarResultsChakra = chakra(KBarResults)
+
+export const KBar = ({}: KBarProps) => {
+  return (
+    <KBarPortal>
+      <KBarPositioner>
+        <KBarAnimatorChakra shadow="2xl" rounded="md">
+          <KBarSearchChakra
+            p={4}
+            w="500px"
+            roundedTop="md"
+            _focus={{ outline: 'none' }}
+          />
+          <RenderResults />
+        </KBarAnimatorChakra>
+      </KBarPositioner>
+    </KBarPortal>
+  )
+}
+
+const RenderResults = () => {
+  const { results } = useMatches()
+
+  return (
+    <KBarResultsChakra
+      items={results}
+      onRender={({ item, active }) =>
+        typeof item === 'string' ? (
+          <Flex height="50px">{item}</Flex>
+        ) : (
+          <Flex
+            height="50px"
+            roundedBottom="md"
+            align="center"
+            px="4"
+            bgColor={active ? 'blue.50' : 'white'}
+            _hover={{ bgColor: 'blue.50' }}
+          >
+            {active && (
+              <Flex
+                pos="absolute"
+                left="0"
+                h="full"
+                w="3px"
+                roundedRight="md"
+                bgColor={'blue.500'}
+              />
+            )}
+            {item.name}
+          </Flex>
+        )
+      }
+    />
+  )
+}