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

package/src/views/ChatHistory/utils.ts

@@ -2,6 +2,11 @@ import { agentClient, aiClient, workspaceClient } from '@stack-spot/portal-netwo
 import { ChatProperties } from '../../state/ChatState'
 import { LabeledWithImage } from '../../state/types'
 
+/**
+ * Finds a stack by its id.
+ * @param id the id of the stack.
+ * @returns the stack or undefined.
+ */
 export async function findStack(id: string | null): Promise<ChatProperties['stack'] | undefined> {
   if (!id) return
   try {
@@ -14,6 +19,11 @@ export async function findStack(id: string | null): Promise<ChatProperties['stac
   }
 }
 
+/**
+ * Finds a workspace by its id.
+ * @param id the id of the workspace.
+ * @returns the workspace or undefined.
+ */
 export async function findWorkspace(id: string | null): Promise<ChatProperties['workspace'] | undefined> {
   if (!id) return
   try {
@@ -26,6 +36,10 @@ export async function findWorkspace(id: string | null): Promise<ChatProperties['
   }
 }
 
+/**
+ * Finds all the agents, including common agents and public agents.
+ * @returns an array with every agent.
+ */
 export async function getAllAgents(): Promise<LabeledWithImage[]> {
   try {
     const [agents, publicAgents] = await Promise.all([agentClient.agents.query({}), agentClient.publicAgents.query({})])

package/src/views/ChatTabSelection.tsx

@@ -17,6 +17,9 @@ const TabLabel = ({ id }: { id: string }) => {
   return <div title={label}>{label}</div>
 }
 
+/**
+ * This renders the top-most part of the layout, which includes the chat selection through tabs.
+ */
 export const ChatTabSelection = ({ history, interceptors }: Props) => {
   const t = useTranslate(dictionary)
   const widget = useWidget()

package/src/views/Editor.tsx

@@ -42,6 +42,9 @@ const TitleBox = styled.div`
   }
 `
 
+/**
+ * Renders the Editor in the Right Panel if this is the panel that is currently opened.
+ */
 export const Editor = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')
@@ -94,6 +97,7 @@ const EditorPanel = () => {
       const selectedText = editor.getModel()?.getValueInRange(e.selection)
       chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
     }, MIN_SELECTION_UPDATE_MS))
+    editor.focus()
   }, [])
 
   useEffect(() => () => {

package/src/views/Home.tsx

@@ -8,6 +8,9 @@ import { useCurrentChat } from '../context/hooks'
 import { ChatEntry } from '../state/ChatEntry'
 
 interface Props {
+  /**
+   * The name of the user currently logged in.
+   */
   username: string,
 }
 
@@ -44,6 +47,11 @@ const HomeBox = styled.div`
   }
 `
 
+/**
+ * Renders the default home page for the chat. This shows up when no message has been sent yet.
+ * 
+ * The home page can be replaced by providing children to the component `StackspotAIWidget`.
+ */
 export const Home = ({ username }: Props) => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()

package/src/views/KSDocument.tsx

@@ -8,6 +8,9 @@ import { useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 import { extractCodeFromKSDocument } from '../utils/knowledge-source'
 
+/**
+ * Renders the KS document in the Right Panel if this is the panel that is currently opened.
+ */
 export const KSDocument = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')

package/src/views/KnowledgeSources.tsx

@@ -35,6 +35,9 @@ export const KnowledgeSources = () => {
   return null
 }
 
+/**
+ * Renders the KS selection form in the Right Panel if this is the panel that is currently opened.
+ */
 const KnowledgeSourcesPanel = () => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()

package/src/views/MessageInput/ButtonGroup.tsx

@@ -8,14 +8,36 @@ import { MessageInputFeatures } from '../../features'
 import { useMessageInputDictionary } from './dictionary'
 
 interface ButtonGroupProps {
+  /**
+   * The features enabled and accessible through the message input.
+   */
   features: MessageInputFeatures,
+  /**
+   * Whether or not the button group is expanded.
+   */
   expanded: boolean,
+  /**
+   * A function to set the button group as expanded or collapsed.
+   */
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>,
+  /**
+   * Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
+   */
   isLoading: boolean,
+  /**
+   * A function to run when the send button is clicked.
+   */
   onSend: () => void,
+  /**
+   * A function to run when the cancel button is clicked.
+   */
   onCancel: () => void,
 }
 
+/**
+ * Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
+ * editor, change the agent, the stack, etc.
+ */
 export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
   const t = useMessageInputDictionary()
   const widget = useWidget()

package/src/views/MessageInput/InfoBar.tsx

@@ -21,6 +21,13 @@ const InfoBadge = ({ label, color, dismiss, onDismiss }: InfoBadgeProps) => (
   </Badge>
 )
 
+/**
+ * This renders the bar on top of the textarea to send the message. This tells:
+ * - if there's any code selected in the editor;
+ * - which workspace is being used;
+ * - which stack is being used;
+ * - which knowledge sources are being used.
+ */
 export const InfoBar = () => {
   const t = useMessageInputDictionary()
   const chat = useCurrentChat()

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -13,6 +13,9 @@ import { quickCommandRegex } from '../../regex'
 import { getUrlToStackSpotAI } from '../../utils/url'
 
 interface Props {
+  /**
+   * A reference to the input this quick commands panel is attached to.
+   */
   inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
 }
 
@@ -127,6 +130,10 @@ const SelectorContent = ({ filter, onClose, inputRef }: ContentProps) => {
   )
 }
 
+/**
+ * This renders the floating Quick Commands panel that allows the user to select a quick command. This appears whenever the user types "/"
+ * in the textarea.
+ */
 export const QuickCommandSelector = ({ inputRef }: Props) => {
   const value = useCurrentChatState('nextMessage') ?? ''
   const filter = useMemo(() => value === '/' || quickCommandRegex.test(value) ? value.substring(1) : undefined, [value])

package/src/views/MessageInput/index.tsx

@@ -13,9 +13,17 @@ import { QuickCommandSelector } from './QuickCommandSelector'
 import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
 
 interface Props {
+  /**
+   * The features enabled and accessible through the message input.
+   */
   features: MessageInputFeatures,
 }
 
+/**
+ * This renders the MessageInput part of the layout which includes the progress bar, the actual textarea, the badges telling what is
+ * going to be used for the question and the buttons to send, cancel, set the workspace, among others. This also includes the Quick
+ * Commands panel for auto completing.
+ */
 export const MessageInput = ({ features }: Props) => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)

package/src/views/MinimizedHeader.tsx

@@ -47,6 +47,10 @@ const Header = styled.header`
   }
 `
 
+/**
+ * When the chat is minimized, there's no chat selection, i.e. the tabs are not rendered. In place of the tabs this header with the current
+ * chat name and buttons to collapse and close is rendered.
+ */
 export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActions) => {
   const t = useTranslate(dictionary)
   const { active } = useChatTabs()

package/src/views/Stacks.tsx

@@ -11,6 +11,9 @@ import { RightPanelTabs } from '../components/RightPanelTabs'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
 export const Stacks = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')

package/src/views/Workspaces.tsx

@@ -11,6 +11,9 @@ import { RightPanelForm } from '../components/RightPanelForm'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
 
+/**
+ * Renders the Workspace selection form in the Right Panel if this is the panel that is currently opened.
+ */
 export const Workspaces = () => {
   const t = useTranslate(dictionary)
   const panel = useWidgetState('panel')