@stack-spot/ai-chat-widget 1.0.0 → 1.1.0

package/src/StackspotAIWidget.tsx

@@ -26,23 +26,44 @@ import { Stacks } from './views/Stacks'
 import { Workspaces } from './views/Workspaces'
 
 export interface AIWidgetProps {
+  /**
+   * The features to enable or disable.
+   */
   features?: AIWidgetFeatures,
+  /**
+   * The name of the user currently logged in.
+   */
   username: string,
+  /**
+   * Chat interceptors allows you to intercept chat messages, interpret them, modify them and even change the chat flow. See
+   * {@link ChatState} for more details.
+   */
   interceptors?: MessageInterceptor[],
+  /**
+   * A custom view to show when the chat has no messages to display.
+   */
   children?: React.ReactNode,
+  /**
+   * If the chat can be minimized, this set of functions tells what to do when minimization related buttons are clicked.
+   */
   minimizedActions?: MinimizedActions,
 }
 
+/**
+ * Renders a Chat Widget according to the closest model found in the React tree (AIWidgetProvider). If no model is found, a global version
+ * of the Chat Widget will be instantiated and used.
+ */
 export const StackspotAIWidget = (
   { username, features = defaultFeatures, interceptors: userInterceptors = [], minimizedActions = {}, children }: AIWidgetProps,
 ) => {
   const widget = useWidget()
   const interceptors: MessageInterceptor[] = useMemo(
-    () => [
+    () => features.quickCommands ? [
       ...userInterceptors,
       quickCommandQuestionsInterceptor,
       createQuickCommandInterceptor(widget, () => loader.__getMonacoInstance()?.editor),
-      sendMessageInterceptor],
+      sendMessageInterceptor,
+    ] : [...userInterceptors, sendMessageInterceptor],
     [],
   )
   useFirstChat(interceptors)

package/src/chat-interceptors/CustomInputs.ts

@@ -1,9 +1,10 @@
 import { CustomInputResponse } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, translate } from '@stack-spot/portal-translate'
 import { ChatEntry } from '../state/ChatEntry'
+import { ChatState } from '../state/ChatState'
 import { LabeledWithImage } from '../state/types'
 
-export const CUSTOM_INPUTS_KEY = 'customInputs'
+const CUSTOM_INPUTS_KEY = 'customInputs'
 
 export class CustomInputs {
   private value: Record<string, string> = {}
@@ -21,6 +22,18 @@ export class CustomInputs {
     })
   }
 
+  static getCustomInputsFromChat(chat: ChatState): CustomInputs | undefined {
+    return chat.interceptorMemory.get(CUSTOM_INPUTS_KEY)
+  }
+
+  static setCustomInputsForChat(inputs: CustomInputs, chat: ChatState): void {
+    chat.interceptorMemory.set(CUSTOM_INPUTS_KEY, inputs)
+  }
+
+  static deleteCustomInputsFromChat(chat: ChatState): void {
+    chat.interceptorMemory.delete(CUSTOM_INPUTS_KEY)
+  }
+
   ask(): ChatEntry {
     if (this.index >= this.inputs.length) throw new Error('No more questions to ask.')
     const t = translate(dictionary)

package/src/chat-interceptors/quick-command-questions.ts

@@ -1,11 +1,21 @@
 import { ChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
-import { CUSTOM_INPUTS_KEY } from './CustomInputs'
+import { CustomInputs } from './CustomInputs'
 
+/**
+ * This chat interceptor is responsible for interrupting the normal flow of the chat and asking questions about the variables (custom
+ * inputs) needed to run the quick command previously typed.
+ * 
+ * The first question is actually asked by the `quickCommandInterceptor`, this registers all answers and asks the next questions (if any).
+ * 
+ * @param entry the chat entry.
+ * @param chat the chat state.
+ * @returns false if, and only if, this entry is an answer to a quick command question (custom input). Undefined otherwise.
+ */
 export function quickCommandQuestionsInterceptor(entry: ChatEntry, chat: ChatState) {
   const { agentType, content } = entry.getValue()
   if (agentType !== 'user') return
-  const customInputs = chat.interceptorMemory.get(CUSTOM_INPUTS_KEY)
+  const customInputs = CustomInputs.getCustomInputsFromChat(chat)
   if (!customInputs) return
   if (content === '/skip') customInputs.skip()
   else customInputs.answer(content)

package/src/chat-interceptors/quick-commands.ts

@@ -11,7 +11,7 @@ import { LabeledWithImage } from '../state/types'
 import { WidgetState } from '../state/WidgetState'
 import { buildConversationContext } from '../utils/chat'
 import { getSizeOfString } from '../utils/string'
-import { CUSTOM_INPUTS_KEY, CustomInputs } from './CustomInputs'
+import { CustomInputs } from './CustomInputs'
 
 type SlugExecution = Record<string, string | QuickCommandFetchResponseResult | QuickCommandPromptResponse2>
 
@@ -25,16 +25,35 @@ interface QCContext {
   signal: AbortSignal,
 }
 
+/**
+ * While the quick command is running, if it takes more than `progressMessageDelayMS` a progress message is shown.
+ * This progress message is shown immediately if one of the steps is of type "LLM".
+ */
 const progressMessageDelayMS = 1000
 
+/**
+ * This creates a chat interceptor for interpreting and running quick commands. We need a function to create the interceptor because, for
+ * quick commands, we need access to the full widget state and the editor, which are not provided to a chat interceptor.
+ * 
+ * The quick command interceptor intercepts all user messages (trimmed) that matches the quick command regex. It fetches the quick command
+ * from the backend, runs all of its steps and outputs the final response (in the chat or in the editor).
+ * 
+ * @param widget the full widget state.
+ * @param getEditor a function that returns the editor instance (monaco).
+ * @returns the quick commands chat interceptor.
+ */
 export function createQuickCommandInterceptor(widget: WidgetState, getEditor: () => typeof editor | undefined) {
+  /**
+   * This creates a CustomInputs instance in the current chat, which activates the `quickCommandQuestionsInterceptor`. In summary, this asks
+   * the first question, wait for all answers to be given and fills the result map in the context passed as parameter.
+   */
   async function computeCustomInputs(ctx: QCContext) {
     const { chat, qc: { custom_inputs: inputs, name, slug } } = ctx
     if (!inputs?.length) return
     chat.set('isLoading', false)
     const t = translate(dictionary)
     const customInputs = new CustomInputs(inputs, chat.get('agent'))
-    chat.interceptorMemory.set(CUSTOM_INPUTS_KEY, customInputs)
+    CustomInputs.setCustomInputsForChat(customInputs, chat)
     chat.pushMessage(new ChatEntry({
       agentType: 'bot',
       type: 'text',
@@ -43,10 +62,13 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     chat.pushMessage(customInputs.ask())
     const inputsValues = await customInputs.getValue()
     chat.set('isLoading', true)
-    chat.interceptorMemory.delete(CUSTOM_INPUTS_KEY)
+    CustomInputs.deleteCustomInputsFromChat(chat)
     ctx.resultMap = { ...ctx.resultMap, ...inputsValues }
   }
 
+  /**
+   * Runs a fetch step of a quick command and puts the result in the `resultMap` of the context passed as parameter.
+   */
   async function runFetchStep(ctx: QCContext, stepIndex: number) {
     const { qc: { slug, steps }, code, context, resultMap, executionId, signal } = ctx
     const step = steps![stepIndex]
@@ -65,6 +87,9 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     }
   }
 
+  /**
+   * Runs an LLM step of a quick command and puts the result in the `resultMap` of the context passed as parameter.
+   */
   async function runLLMStep(
     { qc: { slug, steps }, code, context, executionId, resultMap, signal }: QCContext,
     stepIndex: number,
@@ -146,6 +171,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
         widget.chatTabs.select(ctx.chat.id)
         ctx.context.conversation_id = ctx.chat.id
       } else {
+        // if we're running a command in teh editor, we don't need to open a new tab, we just need to run it in a new conversation context.
         ctx.context.conversation_id = ulid()
       }
     }
@@ -170,6 +196,9 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     return formatResult(ctx)
   }
 
+  /**
+   * This registers a quick command event in the backend (analytics).
+   */
   async function registerAnalyticsEvent({ qc, executionId, code = '', context }: QCContext, status: string, start: number) {
     const now = new Date().getTime()
     try {
@@ -197,6 +226,9 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     }
   }
 
+  /**
+   * Writes the result in the chat or in the editor.
+   */
   function outputResult({ qc, chat, code }: QCContext, result: string) {
     if (qc.return_type === 'CHAT') {
       chat.pushMessage(new ChatEntry({
@@ -216,6 +248,13 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     }
   }
 
+  /**
+   * The chat interceptor itself.
+   * @param entry the chat entry.
+   * @param chat the chat state.
+   * @param signal a signal that can be canceled by the user.
+   * @returns false if, and only if, this entry (trimmed) matches the quick command regex. Undefined otherwise.
+   */
   async function quickCommandInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
     const { agentType, content } = entry.getValue()
     if (agentType !== 'user' || !quickCommandRegex.test(content.trim())) return

package/src/chat-interceptors/send-message.ts

@@ -6,6 +6,14 @@ import { LabeledWithImage } from '../state/types'
 import { buildConversationContext } from '../utils/chat'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
 
+/**
+ * Transforms a chat response from the backend into a chat entry that can be added to the chat.
+ * @param response the original response.
+ * @param knowledgeSources the knowledge sources already in format used by the chat.
+ * @param agent the current chat agent.
+ * @param includeDate whether or not to include the date in the chat entry.
+ * @returns the TextChatEntry to build a ChatEntry.
+ */
 function createEntryValueFromChatResponse(
   response: Partial<ChatResponse3>,
   knowledgeSources: KnowledgeSource[] | undefined,
@@ -23,6 +31,16 @@ function createEntryValueFromChatResponse(
   }
 }
 
+/**
+ * The chat interceptor that sends the message to the AI agent, interprets the response and adds it to the chat.
+ * 
+ * The message added to the chat is streamed, i.e. it changes over time, until it's completed.
+ * 
+ * @param entry the chat entry.
+ * @param chat the chat state.
+ * @param signal a signal that can be canceled by the user.
+ * @returns undefined
+ */
 export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState, signal: AbortSignal) {
   const { agentType, content } = entry.getValue()
   if (agentType !== 'user') return

package/src/components/Accordion.tsx

@@ -9,7 +9,14 @@ import { styled } from 'styled-components'
 import { WithChildren } from '../types'
 
 interface Props extends WithStyle, Required<WithChildren> {
+  /**
+   * The header of the accordion (always rendered). The body (hidden part) must be passed as the children.
+   */
   header: React.ReactNode,
+  /**
+   * Whether or not to start expanded.
+   * @default false
+   */
   startExpanded?: boolean,
 }
 
@@ -48,6 +55,9 @@ const StyledAccordion = styled.div`
   }
 `
 
+/**
+ * A component that can have it's content shown or hidden (animated).
+ */
 export const Accordion = ({ children, header, className, startExpanded, style }: Props) => {
   const [expanded, setExpanded] = useState(startExpanded)
   return (

package/src/components/AdaptiveTextArea.tsx

@@ -4,11 +4,23 @@ import { forwardRef, useEffect, useRef } from 'react'
 import { PropsOf } from '../types'
 
 interface Props extends PropsOf<typeof Textarea> {
+  /**
+   * A function to run whenever the height of the text area increases.
+   */
   onIncreaseSize?: () => void,
+  /**
+   * A function to run whenever the text area value becomes empty.
+   */
   onResetSize?: () => void,
+  /**
+   * The maximum height this textarea can get to.
+   */
   maxHeight?: number,
 }
 
+/**
+ * The adaptive textarea grows in height whenever needed until the maximum height is reached.
+ */
 export const AdaptiveTextArea = forwardRef<HTMLTextAreaElement, Props>((
   { value, onIncreaseSize, onResetSize, maxHeight, style, ...props },
   externalRef,

package/src/components/AutoFocus.tsx

@@ -1,19 +1,33 @@
 /* eslint-disable react/display-name */
+import { focusFirstChild, TagPriorityElement } from '@stack-spot/portal-components'
 import { forwardRef, RefObject, useEffect, useRef } from 'react'
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * A delay in ms to focus the first focusable element.
+   */
   delay?: number,
+  /**
+   * Instead of focusing the first element overall, focus the first according to this list of priorities.
+   * 
+   * 'other' means elements that are normally not focusable, but have positive tabIndex values.
+   */
+  priority?: TagPriorityElement[],
+  /**
+   * Ignores any element that matches this query selector.
+   */
+  ignore?: string,
 }
 
-export const AutoFocus = forwardRef<HTMLDivElement, Props>(({ children, delay = 0, ...props }, externalRef) => {
+/**
+ * Focus the first focusable child as soon as the component mounts.
+ */
+export const AutoFocus = forwardRef<HTMLDivElement, Props>(({ children, delay = 0, priority, ignore, ...props }, externalRef) => {
   const localRef = useRef<HTMLDivElement>(null)
   const ref = externalRef as RefObject<HTMLDivElement> ?? localRef
 
   useEffect(() => {
-    setTimeout(() => {
-      // fixme: we should actually call `focusFirstChild` from the component lib, but, it's bugged
-      (ref.current?.querySelector('a, button, input, select, textarea') as HTMLElement)?.focus()
-    }, delay)
+    setTimeout(() => focusFirstChild(ref.current, { priority, ignore }), delay)
   }, [])
 
   return <div ref={ref} {...props}>{children}</div>

package/src/components/Fading.tsx

@@ -4,18 +4,35 @@ import { forwardRef, useEffect, useRef, useState } from 'react'
 import { WithChildren } from '../types'
 
 interface Props extends WithChildren, WithStyle {
+  /**
+   * Whether or not the content is visible.
+   */
   visible: boolean,
   /**
    * Duration of the animation in ms.
    * @default 300
    */
   duration?: number,
-  onFadeIn?: () => void,
-  onFadeOut?: () => void,
+  /**
+   * Function to run right before animation to show the content starts.
+   */
+  beforeFadeIn?: () => void,
+  /**
+   * Function to run right before animation to hide the content starts.
+   */
+  beforeFadeOut?: () => void,
+  /**
+   * Function to run right after the animation to show the content ends.
+   */
+  afterFadeIn?: () => void,
+  /**
+   * Function to run right after the animation to hide the content ends.
+   */
+  afterFadeOut?: () => void,
 }
 
 export const Fading = forwardRef<HTMLDivElement, Props>((
-  { visible, children, duration = 300, onFadeIn, onFadeOut, className, style },
+  { visible, children, duration = 300, afterFadeIn, afterFadeOut, beforeFadeIn, beforeFadeOut, className, style },
   ref,
 ) => {
   const [isOpaque, setOpaque] = useState(visible)
@@ -30,13 +47,16 @@ export const Fading = forwardRef<HTMLDivElement, Props>((
     timeout.current = []
     if (visible) {
       setRendered(true)
+      if (afterFadeIn) timeout.current.push(window.setTimeout(afterFadeIn, duration))
+      beforeFadeIn?.()
       timeout.current.push(window.setTimeout(() => setOpaque(true), 0))
-      if (onFadeIn) timeout.current.push(window.setTimeout(onFadeIn, duration))
+      
     } else {
       setOpaque(false)
+      beforeFadeOut?.()
       timeout.current.push(window.setTimeout(() => {
         setRendered(false)
-        onFadeOut?.()
+        afterFadeOut?.()
       }, duration))
     }
     previous.current = visible

package/src/components/FadingOverflow.tsx

@@ -10,12 +10,38 @@ type Side = 'top' | 'right' | 'left' | 'bottom'
 type ScrollType = 'none' | 'wheel' | 'bar' | 'arrows'
 
 interface Props extends WithChildren, WithStyle {
+  /**
+   * How to scroll the content.
+   * - none: overflow is hidden. No scrolling.
+   * - wheel: the content is solely scrollable through the mouse wheel and keyboard arrows, no scroll bars are rendered.
+   * - bar: this is the normal browser scroll. The content will be scrollable through the mouse wheel, keyboard and scrollbar.
+   * - arrows: arrows will be placed in the far edges of the sides that must be scrolled. The content is scrolled through the mouse wheel,
+   * keyboard and these arrows. Hovering an arrow slowly scrolls the content, clicking the arrow fully scrolls the content in its direction.
+   * There are no scrollbars in this scenario.
+   * @default 'none'
+   */
   scroll?: ScrollType,
+  /**
+   * If true, a horizontal scroll can be performed by using the vertical mouse wheel.
+   * @default false
+   */
   enableHorizontalScrollWithVerticalWheel?: boolean,
+  /**
+   * Which sides to fade when the content overflows.
+   * 
+   * Important: it seems the current solution doesn't support mixing vertical and horizontal scrolls. I'm not sure if this is possible, I
+   * believed combining linear gradients would work, but it doesn't.
+   */
   sides?: Side[],
 }
 
+// Scrolling can be very fast, this sets a lower limit for us to run listeners without impacting performance.
 const MIN_CHECK_INTERVAL_MS = 20
+// The interval which to scroll the content when a scroll arrow is hovered.
+const SCROLL_INTERVAL_MS = 20
+// This sets the speed of the scroll when the user hovers a scroll arrow.
+const SCROLL_PX = 4
+// Fade masks
 const masks = {
   right: 'linear-gradient(to left, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
   left: 'linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0) min(30%, 100px), rgba(0, 0, 0) 100%)',
@@ -95,9 +121,11 @@ const OverflowBox = styled.div`
   }
 `
 
-const SCROLL_INTERVAL_MS = 20
-const SCROLL_PX = 4
-
+/**
+ * This component applies a fading graphical effect to its content if it overflows in any of the sides specified by the props.
+ * 
+ * This also controls how this overflow is scrolled, introducing a new scrolling technique, which applies arrows to the overflowing side.
+ */
 export const FadingOverflow = (
   { children, scroll = 'none', sides, enableHorizontalScrollWithVerticalWheel, className, ...props }: Props,
 ) => {

package/src/components/FallbackBoundary/index.tsx

@@ -4,7 +4,13 @@ import { ErrorBoundary } from './ErrorBoundary'
 import { Loading } from './Loading'
 
 interface Props extends WithChildren {
+  /**
+   * Use this to show errors in small spaces.
+   */
   mini?: boolean,
+  /**
+   * Replaces the error message with this text.
+   */
   message?: string,
 }
 

package/src/components/HistoryList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-empty-pattern */
 import { Text } from '@citric/core'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -10,9 +9,21 @@ import { subtractDays } from '../utils/date'
 type HistorySectionName = 'today' | 'yesterday' | 'last7' | 'last30' | 'older'
 
 interface Props<T> extends WithStyle {
+  /**
+   * The items in the history.
+   */
   items: T[],
+  /**
+   * A function to render an item.
+   */
   renderItem: (item: T) => React.ReactNode,
+  /**
+   * A function that returns the date of the item.
+   */
   getDate: (item: T) => Date,
+  /**
+   * A function that returns a unique id for the item.
+   */
   keygen: (item: T) => React.Key,
 }
 
@@ -53,6 +64,9 @@ function dateToSectionName(date: Date): HistorySectionName {
   return date.getTime() >= last30Days.getTime() ? 'last30' : 'older'
 }
 
+/**
+ * Renders a history list, where the items are combined into sections according to their dates.
+ */
 export function HistoryList<T>({ getDate, items, keygen, className, style, renderItem }: Props<T>) {
   const t = useTranslate(dictionary)
   const sections = useMemo(() => {

package/src/components/IconInput.tsx

@@ -47,6 +47,9 @@ const InputBox = styled.div`
   }
 `
 
+/**
+ * A text input with an icon at the left side.
+ */
 export const IconInput = ({ icon, onChange, style, className, disabled, onFocus, onBlur, ...props }: Props) => {
   const [focused, setFocused] = useState(false)
 

package/src/components/OverlayMenu.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/display-name */
-/* eslint-disable no-empty-pattern */
 import { IconBox, Text } from '@citric/core'
 import { useKeyboardControls } from '@stack-spot/portal-components'
 import { theme, WithStyle } from '@stack-spot/portal-theme'
@@ -11,12 +10,24 @@ import { useTooltip } from './Tooltip/context'
 import { TooltipPosition } from './Tooltip/types'
 
 interface Props extends WithStyle, WithChildren {
+  /**
+   * The position of the menu relative to its children.
+   */
   position?: TooltipPosition,
+  /**
+   * The actions of the menu.
+   */
   actions: ButtonAction[],
 }
 
 interface MenuProps {
+  /**
+   * The actions of the menu.
+   */
   actions: ButtonAction[],
+  /**
+   * A reference to the HTML element that triggered the menu.
+   */
   trigger: RefObject<HTMLDivElement>,
 }
 
@@ -91,6 +102,11 @@ const Menu = ({ actions, trigger }: MenuProps) => {
   )
 }
 
+/**
+ * A floating menu that shows up when the user clicks the children.
+ * 
+ * This uses the tooltip component to build the menu.
+ */
 export const OverlayMenu = forwardRef<HTMLDivElement, Props>(({ actions, children, className, position, style }, externalRef) => {
   const localRef = useRef<HTMLDivElement>(null)
   const ref = externalRef as RefObject<HTMLDivElement> ?? localRef

package/src/components/ProgressBar.tsx

@@ -2,10 +2,28 @@ import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
 import { styled } from 'styled-components'
 
 interface Props extends WithStyle {
+  /**
+   * Whether or not the progress bar is visible.
+   */
   visible?: boolean,
+  /**
+   * When true, the progress bar becomes very colorful and bright.
+   */
   shimmer?: boolean,
+  /**
+   * Color to use in the progress bar that appears in the foreground. Arrays create linear gradients.
+   * @default primary.500 if shimmer is false, white otherwise.
+   */
   foregroundColor?: string | string[],
+  /**
+   * Color to use in the progress bar that appears in the background. Arrays create linear gradients.
+   * @default light.500 if shimmer is false, a transparent white otherwise.
+   */
   backgroundColor?: string | string[],
+  /**
+   * Only useful if `shimmer` is true. This allows to customize the colors in the shimmering effect. Arrays create linear gradients.
+   * @default ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4']
+   */
   shimmerColor?: string | string[],
 }
 
@@ -21,6 +39,7 @@ function gradientFromColorArray(colors: string[]) {
   return `linear-gradient(to right, ${partials.join(', ')})`
 }
 
+// the shimmering effect requires more space
 const SHIMMER_PADDING = '10px'
 
 const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
@@ -123,6 +142,10 @@ const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
   }
 `
 
+/**
+ * A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
+ * right.
+ */
 export const ProgressBar = ({
   visible = true,
   shimmer,

package/src/components/QuickStartButton.tsx

@@ -7,6 +7,9 @@ interface Props extends ButtonAction, WithStyle {
   background?: string,
 }
 
+/**
+ * A button for quick starting a conversation.
+ */
 const QuickButton = styled.button<{ $color?: string, $bg?: string }>`
   display: flex;
   flex-direction: column;

package/src/components/RightPanelForm.tsx

@@ -41,6 +41,9 @@ const Form = styled.form`
   }
 `
 
+/**
+ * A form that goes into a right panel. This controls style, errors, loading focus and form submission.
+ */
 export const RightPanelForm = ({ children, onSubmit, ...props }: PropsOf<typeof Form>) => (
   <FallbackBoundary>
     <AutoFocus>

package/src/components/RightPanelTabs.tsx

@@ -24,6 +24,9 @@ const StyledTabsItem = styled(TabsItem)`
   overflow: hidden;
 `
 
+/**
+ * Tabs for the right panel content.
+ */
 export const RightPanelTabs = ({ tabs }: Props) => {
   const [currentTab, setCurrentTab] = useState(0)
   const tabItems = useMemo(() => tabs.map(({ content, title }) => (

package/src/components/TabManager.tsx

@@ -41,7 +41,9 @@ interface Props<T, Key extends React.Key> {
   renderLabel: (tab: T) => React.ReactElement,
 }
 
+// The size of extra buttons placed after the tabs.
 const EXTRA_BTN_SIZE = 24
+// The margin of extra buttons placed after the tabs.
 const EXTRA_BTN_MARGIN = 8
 
 const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
@@ -161,6 +163,12 @@ const Tabs = styled.nav<{ $numberOfExtraButtons: number }>`
   }
 `
 
+/**
+ * Renders and manages a list of tabs. With this, tabs can be selected and removed. Furthermore, extra buttons can be placed after all tabs,
+ * e.g. a button to add more tabs.
+ * 
+ * Used for the chat tabs.
+ */
 export function TabManager<T, Key extends React.Key>(
   { active, tabs, keygen, onRemove, onSelect, renderLabel, buttons = [] }: Props<T, Key>,
 ) {