docs: migrate studio

bach.config.ts

@@ -28,6 +28,164 @@ export default defineConfig(collections, {
               },
             ],
           },
+          {
+            group: 'Studio',
+            pages: [
+              'studio/introduction',
+              {
+                group: 'Concepts',
+                pages: [
+                  'studio/concepts/home',
+                  {
+                    group: 'Nodes',
+                    icon: 'SquareMousePointer',
+                    pages: ['studio/concepts/nodes/introduction', 'studio/concepts/nodes/autonomous-node'],
+                  },
+                  {
+                    group: 'Cards',
+                    icon: 'Rows3',
+                    pages: [
+                      'studio/concepts/cards/introduction',
+                      'studio/concepts/cards/send-messages',
+                      'studio/concepts/cards/execute-code',
+                      'studio/concepts/cards/tables',
+                      'studio/concepts/cards/set-inactivity-timeout',
+                      'studio/concepts/cards/webchat',
+                      'studio/concepts/cards/flow-logic',
+                      {
+                        group: 'AI',
+                        pages: [
+                          'studio/concepts/cards/ai/introduction',
+                          'studio/concepts/cards/ai/ai-task',
+                          'studio/concepts/cards/ai/ai-transition',
+                          'studio/concepts/cards/ai/ai-generate-text',
+                        ],
+                      },
+                      'studio/concepts/cards/capture-information',
+                      'studio/concepts/cards/fixed-schedule',
+                      'studio/concepts/cards/agents',
+                      'studio/concepts/cards/utilities',
+                    ],
+                  },
+                  'studio/concepts/workflows',
+                  {
+                    group: 'Knowledge Bases',
+                    icon: 'BookOpen',
+                    pages: [
+                      'studio/concepts/knowledge-base/introduction',
+                      'studio/concepts/knowledge-base/add-sources',
+                      'studio/concepts/knowledge-base/knowledge-base-best-practices',
+                    ],
+                  },
+                  'studio/concepts/tables',
+                  'studio/concepts/actions',
+                  {
+                    group: 'Agents',
+                    icon: 'Bot',
+                    pages: [
+                      'studio/concepts/agents/introduction',
+                      'studio/concepts/agents/summary-agent',
+                      'studio/concepts/agents/personality-agent',
+                      'studio/concepts/agents/policy-agent',
+                      'studio/concepts/agents/translator-agent',
+                      'studio/concepts/agents/knowledge-agent',
+                      'studio/concepts/agents/hitl-agent',
+                      'studio/concepts/agents/vision-agent',
+                      'studio/concepts/agents/analytics-agent',
+                    ],
+                  },
+                  'studio/concepts/hooks',
+                  'studio/concepts/card-hub',
+                  'studio/concepts/integrations',
+                  'studio/concepts/schemas',
+                  'studio/concepts/versions',
+                  'studio/concepts/bot-settings',
+                  'studio/concepts/find',
+                  {
+                    group: 'Variables',
+                    icon: 'Variable',
+                    pages: [
+                      'studio/concepts/variables/overview',
+                      {
+                        group: 'Scopes',
+                        pages: [
+                          'studio/concepts/variables/scopes/workflow',
+                          'studio/concepts/variables/scopes/user',
+                          'studio/concepts/variables/scopes/conversation',
+                          'studio/concepts/variables/scopes/bot',
+                          'studio/concepts/variables/scopes/configuration',
+                        ],
+                      },
+                      'studio/concepts/variables/built-in',
+                      'studio/concepts/variables/pass-between-workflows',
+                      'studio/concepts/variables/in-code',
+                    ],
+                  },
+                  'studio/concepts/triggers',
+                  'studio/concepts/debugger-logs-json',
+                  'studio/concepts/emulator',
+                  'studio/concepts/import-export-bots',
+                  'studio/concepts/copy-to-bot',
+                  {
+                    group: 'Controls and Settings',
+                    icon: 'Wrench',
+                    pages: [
+                      'studio/concepts/controls-and-settings/keyboard-shortcuts',
+                      'studio/concepts/controls-and-settings/studio-commands',
+                      'studio/concepts/controls-and-settings/studio-preferences',
+                    ],
+                  },
+                ],
+              },
+              {
+                group: 'Guides',
+                pages: [
+                  'studio/guides/introduction',
+                  {
+                    group: 'How-to',
+                    pages: [
+                      'studio/guides/how-to/translate',
+                      'studio/guides/how-to/send-reminders',
+                      'studio/guides/how-to/different-an-models',
+                      'studio/guides/how-to/track-ai-spend-in-table',
+                      'studio/guides/how-to/dropdown-menus',
+                    ],
+                  },
+                  {
+                    group: 'Advanced',
+                    pages: [
+                      'studio/guides/advanced/use-code',
+                      'studio/guides/advanced/event-properties',
+                      'studio/guides/advanced/best-practices-for-state-management',
+                      {
+                        group: 'Safety',
+                        pages: [
+                          'studio/guides/advanced/safety/introduction',
+                          'studio/guides/advanced/safety/preventing-abuse',
+                          'studio/guides/advanced/safety/brand-safety-framework',
+                        ],
+                      },
+                      {
+                        group: 'Exporting Data',
+                        pages: [
+                          'studio/guides/advanced/exporting-data/introduction',
+                          'studio/guides/advanced/exporting-data/exporting-raw-conversations-with-the-botpress-api',
+                          'studio/guides/advanced/exporting-data/getting-the-conversation-history-from-within-your-bot',
+                          'studio/guides/advanced/exporting-data/streaming-analytics-from-within-your-bot-with-hooks',
+                          'studio/guides/advanced/exporting-data/exporting-compiled-bot-analytics-with-the-botpress-api',
+                          'studio/guides/advanced/exporting-data/analyze-llmz-responses',
+                        ],
+                      },
+                      'studio/guides/advanced/kitchen-sink-advanced-starter-template',
+                      'studio/guides/advanced/tips-to-optimize-ai-cost',
+                      'studio/guides/advanced/retention-period',
+                      'studio/guides/advanced/v12',
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
         ],
       },
       { tab: 'Tutorial', pages: ['tutorial/index'] },

src/components/AiIcon.astro

@@ -0,0 +1,17 @@
+<span style="display: inline-flex; vertical-align: middle;">
+  <svg
+    aria-label="Magic icon"
+    width="16"
+    height="16"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 5.5H14.5M14.5 5.5H17M14.5 5.5V3M14.5 5.5V8M3.30524 11.8365C6.14269 11.8365 8.16353 13.8574 8.16353 16.6948C8.20324 17.1017 8.79676 17.1017 8.83647 16.6948C8.83647 13.8574 10.8574 11.8365 13.6948 11.8365C14.1017 11.7968 14.1017 11.2032 13.6948 11.1635C10.8574 11.1635 8.83647 9.14273 8.83647 6.30524C8.79676 5.89825 8.20324 5.89825 8.16353 6.30524C8.16353 9.14273 6.14269 11.1635 3.30524 11.1635C2.89825 11.2032 2.89825 11.7968 3.30524 11.8365Z"
+      stroke="#0190ff"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"></path>
+  </svg>
+</span>

src/components/Expandable.astro

@@ -0,0 +1,12 @@
+---
+import { Expandable as ExpandableReact } from "./Expandable";
+interface Props {
+  title?: string;
+  defaultOpen?: boolean;
+}
+const { title, defaultOpen } = Astro.props;
+---
+
+<ExpandableReact client:load title={title} defaultOpen={defaultOpen}>
+  <slot />
+</ExpandableReact>

src/components/api/expandable.tsx → src/components/Expandable.tsx

@@ -26,7 +26,7 @@ function Expandable({
         setOpen(next)
         onChange?.(next)
       }}
-      className={`mt-3 rounded-lg border border-stone-200 dark:border-stone-700 ${className ?? ''}`}
+      className={`not-prose mt-3 rounded-lg border border-stone-200 dark:border-stone-700 ${className ?? ''}`}
     >
       <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 px-3.5 py-2.5 text-sm text-stone-600 hover:bg-stone-50/50 hover:text-stone-900 dark:text-stone-400 dark:hover:bg-white/5 dark:hover:text-stone-200">
         <ChevronRight className={`size-3 shrink-0 transition-transform ${open ? 'rotate-90' : ''}`} />

src/components/IncomingEvent.astro

@@ -0,0 +1,119 @@
+---
+import { Field } from "@/components/field";
+import { Warning } from "@/components/callouts";
+import Expandable from "./Expandable.astro";
+---
+
+<Field name="event" type="IncomingEvent" required>
+  Information about the last incoming event in your bot's execution.
+
+  <Expandable>
+    <Field name="botId" type="string" required>
+      The ID of the bot that experienced the event.
+    </Field>
+    <Field name="conversationId" type="string">
+      The ID of the conversation that the event took place in.
+    </Field>
+    <Field name="createdOn" type="Date" required>
+      The date and time when the event was created (in <a
+        href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a
+      > format).
+    </Field>
+    <Field name="direction" type="EventDirection" required>
+      The direction of the event, indicating whether the event was received by
+      the bot or sent from the bot. - `'incoming'`: The event originated from
+      the user and was received by the bot. - `'outgoing'`: The event was
+      generated by the bot and sent to the user.
+    </Field>
+    <Field name="id" type="string" required>
+      The unique identifier for the event.
+    </Field>
+    <Field name="integration" type="string">
+      The <a href="/integrations/">integration</a> that the event occurred on.
+    </Field>
+    <Field name="kb" type="object">
+      Information about <a href="/studio/concepts/knowledge-base/introduction"
+        >Knowledge Bases</a
+      > queried for the event.
+
+      <Expandable>
+        <Field name="included" type="Studio.KnowledgeBase.KB[]" required>
+          Array of Knowledge Bases queried for the event.
+
+          <Warning
+            >Since most of this object's properties are for internal use by
+            Botpress, we've omitted its deeper structure from this
+            documentation.</Warning
+          >
+        </Field>
+        <Field name="results" type="Studio.KnowledgeBase.ContentResult[]">
+          Array of Knowledge Base results consulted for this event.
+
+          <Warning
+            >Since most of this object's properties are for internal use by
+            Botpress, we've omitted its deeper structure from this
+            documentation.</Warning
+          >
+        </Field>
+      </Expandable>
+    </Field>
+    <Field name="messageId" type="string">
+      The unique identifier for the current event's message.
+    </Field>
+    <Field name="payload" type="object" required>
+      The payload for the current event.
+    </Field>
+    <Field name="preview" type="string" required>
+      A representation of the event in plain text. If the event is a text
+      message, this property will contain the message itself.
+    </Field>
+    <Field name="state" type="EventState" required>
+      Data related to the state of the event.
+
+      <Warning
+        >Since most of this object's properties are for internal use by
+        Botpress, we've omitted its deeper structure from this documentation.</Warning
+      >
+    </Field>
+    <Field name="tags" type="EventTags">
+      Any tags associated with the current event. These can contain useful data
+      related to the integration associated with the event.
+
+      <Expandable>
+        <Field name="conversation" type="object">
+          Tags for the conversation.
+        </Field>
+        <Field name="message" type="object"> Tags for the message. </Field>
+        <Field name="user" type="object"> Tags for the user. </Field>
+      </Expandable>
+    </Field>
+    <Field name="trigger" type="DM.Trigger">
+      The <a href="/studio/concepts/triggers">Trigger</a> that sent the event.
+
+      <Expandable>
+        <Field name="conversationId" type="string">
+          The ID of the conversation associated with this Trigger.
+        </Field>
+        <Field name="eventName" type="string">
+          The name of the event that the Trigger sent.
+        </Field>
+        <Field name="flowId" type="string" required>
+          The ID of the Workflow containing the Trigger.
+        </Field>
+        <Field name="integration" type="string">
+          The integration associated with the Trigger.
+        </Field>
+        <Field name="nodeId" type="string" required>
+          The ID of the Node that contains the Trigger.
+        </Field>
+        <Field name="userId" type="string">
+          The ID of the user associated with this Trigger.
+        </Field>
+      </Expandable>
+    </Field>
+    <Field name="type" type="string" required> The type of the event. </Field>
+    <Field name="userId" type="string">
+      The user ID associated with this event.
+    </Field>
+  </Expandable>
+</Field>

src/components/YouTube.astro

@@ -0,0 +1,19 @@
+---
+import Frame from "./Frame.astro";
+interface Props {
+  url: string;
+}
+const { url } = Astro.props;
+---
+
+<Frame>
+  <iframe
+    width="600"
+    height="335"
+    src={url}
+    title="YouTube"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen
+  />
+</Frame>

src/components/api/schema-explorer.tsx

@@ -1,7 +1,7 @@
 import { Badge } from '@/components/ui/badge'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
 import { Field } from '@/components/field'
-import { Expandable } from '@/components/api/expandable'
+import { Expandable } from '@/components/Expandable'
 import type { Schema } from '@/bach/schemas'
 
 interface SchemaExplorerProps {

src/components/docs-page.astro

@@ -87,13 +87,11 @@ const title = entry.data.title;
         <Footer />
       </div>
 
-      {headings.length > 0 && (
-        <aside class="docs-toc hidden w-64 shrink-0 xl:block pl-10">
-          <div class="sticky top-10">
-            <ClerkTOC client:load headings={headings} />
-          </div>
-        </aside>
-      )}
+      <aside class="docs-toc hidden w-64 shrink-0 xl:block pl-10">
+        <div class="sticky top-10">
+          <ClerkTOC client:load headings={headings} />
+        </div>
+      </aside>
     </div>
   )
 }

src/components/field.tsx

@@ -36,7 +36,7 @@ function Field({ name, type, required, default: defaultValue, deprecated, hidden
   if (hidden) return null
 
   return (
-    <div className="border-b border-stone-100 py-6 last:border-b-0 dark:border-stone-800/50">
+    <div className="not-prose border-b border-stone-100 py-6 last:border-b-0 dark:border-stone-800/50">
       <div className="flex flex-wrap items-center gap-2">
         <code className="text-sm font-semibold">
           {parentPath && <span className="text-stone-500 dark:text-stone-400">{parentPath}.</span>}