@stack-spot/ai-chat-widget 1.1.1 → 1.3.0

package/src/views/ChatTabSelection.tsx

@@ -2,15 +2,8 @@ import { Clock, Plus } from '@citric/icons'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useMemo } from 'react'
 import { TabManager } from '../components/TabManager'
-import { useChatState, useChatTabs, useWidget } from '../context/hooks'
-import { MessageInterceptor } from '../state/ChatState'
+import { useChatState, useChatTabs, useWidget, useWidgetState } from '../context/hooks'
 import { ButtonAction } from '../types'
-import { createNewChat } from '../utils/chat'
-
-interface Props {
-  history?: boolean,
-  interceptors: MessageInterceptor[],
-}
 
 const TabLabel = ({ id }: { id: string }) => {
   const label = useChatState(id, 'label')
@@ -20,9 +13,10 @@ const TabLabel = ({ id }: { id: string }) => {
 /**
  * This renders the top-most part of the layout, which includes the chat selection through tabs.
  */
-export const ChatTabSelection = ({ history, interceptors }: Props) => {
+export const ChatTabSelection = () => {
   const t = useTranslate(dictionary)
   const widget = useWidget()
+  const { chatHistory } = useWidgetState('features') ?? {}
   const { active, chats } = useChatTabs()
 
   const buttons = useMemo<ButtonAction[]>(
@@ -30,9 +24,9 @@ export const ChatTabSelection = ({ history, interceptors }: Props) => {
       const actions: ButtonAction[] = [{
         icon: <Plus />,
         label: t.newChat,
-        onClick: () => createNewChat(widget, interceptors),
+        onClick: () => widget.createChat(),
       }]
-      if (history) {
+      if (chatHistory) {
         actions.push({
           icon: <Clock />,
           label: t.openHistory,
@@ -43,11 +37,12 @@ export const ChatTabSelection = ({ history, interceptors }: Props) => {
       }
       return actions
     },
-    [history],
+    [chatHistory],
   )
+  
   return <TabManager
     tabs={chats}
-    active={active}
+    active={active.id}
     renderLabel={({ id }) => <TabLabel id={id} />}
     keygen={({ id }) => id}
     onRemove={({ id }) => widget.chatTabs.remove(id)}

package/src/views/Editor.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@citric/core'
 import { LoadingCircular } from '@citric/ui'
 import MonacoEditor, { OnMount } from '@monaco-editor/react'
+import { delay } from '@stack-spot/portal-components'
 import { Select } from '@stack-spot/portal-components/Select'
 import { useThemeKind } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -9,6 +10,7 @@ import { IDisposable } from 'monaco-editor'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { styled } from 'styled-components'
 import { useCurrentChat, useCurrentChatState, useWidget, useWidgetState } from '../context/hooks'
+import { panelAnimationTime } from '../right-panel/constants'
 import { useRightPanel } from '../right-panel/hooks'
 import { defaultLanguage, languages } from '../utils/programming-languages'
 
@@ -92,11 +94,12 @@ const EditorPanel = () => {
   const chat = useCurrentChat()
   const selectionObserver = useRef<IDisposable | undefined>()
 
-  const setup: OnMount = useCallback((editor) => {
+  const setup: OnMount = useCallback(async (editor) => {
     selectionObserver.current = editor.onDidChangeCursorSelection(debounce((e) => {
       const selectedText = editor.getModel()?.getValueInRange(e.selection)
       chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
     }, MIN_SELECTION_UPDATE_MS))
+    await delay(panelAnimationTime)
     editor.focus()
   }, [])
 

package/src/views/{Home.tsx → Home/BuiltInAgent.tsx}

@@ -2,57 +2,16 @@ import { FaceSmile, KnowledgeSource, QuickCommand } from '@citric/icons'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { styled } from 'styled-components'
-import { QuickStartButton } from '../components/QuickStartButton'
-import { useCurrentChat } from '../context/hooks'
-import { ChatEntry } from '../state/ChatEntry'
-
-interface Props {
-  /**
-   * The name of the user currently logged in.
-   */
-  username: string,
-}
-
-const HomeBox = styled.div`
-  margin: auto;
-
-  .title, .subtitle {
-    font-family: 'San Francisco';
-    font-size: 26px;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  .title {
-    display: inline-block;
-    background: linear-gradient(72.81deg, #FF9900 0.96%, #FF6633 100%);
-    background-clip: text;
-    margin-bottom: 10px;
-    color: transparent;
-  }
-
-  .subtitle {
-    color: #A0A0A0;
-    margin-bottom: 20px;
-  }
-
-  .shortcuts {
-    display: flex;
-    flex-direction: row;
-    gap: 15px;
-    li {
-      flex: 1;
-    }
-  }
-`
+import { QuickStartButton } from '../../components/QuickStartButton'
+import { useCurrentChat } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { HomeBox } from './styled'
+import { HomeProps } from './types'
 
 /**
- * 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`.
+ * This is the home rendered when the agent is built-in.
  */
-export const Home = ({ username }: Props) => {
+export const BuiltInAgent = ({ username }: HomeProps) => {
   const t = useTranslate(dictionary)
   const chat = useCurrentChat()
 

package/src/views/Home/CustomAgent.tsx

@@ -0,0 +1,39 @@
+import { Text } from '@citric/core'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { agentClient } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
+import { useMemo } from 'react'
+import { QuickStartButton } from '../../components/QuickStartButton'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { HomeBox } from './styled'
+
+/**
+ * This is the home rendered when the agent is custom.
+ */
+export const CustomAgent = () => {
+  const { id, label, image } = useCurrentChatState('agent') ?? {}
+  const [agent] = agentClient.agent.useStatefulQuery({ agentId: id! })
+  const chat = useCurrentChat()
+  const suggestions = useMemo(() => agent?.suggested_prompts?.map((prompt, index) => (
+    <QuickStartButton
+      key={index}
+      label={prompt}
+      onClick={() => send(prompt)}
+      background={theme.color.light[500]}
+      manageOverflow
+    />
+  )), [agent?.suggested_prompts])
+
+  function send(message: string) {
+    chat.pushMessage(ChatEntry.createUserEntry(message))
+  }
+
+  return (
+    <HomeBox className="home-page custom-agent">
+      {image ? <img src={image} className="avatar" /> : <MiniLogo className="avatar" />}
+      <Text appearance="h3">{label}</Text>
+      <div className="shortcuts">{suggestions?.length ? suggestions : null}</div>
+    </HomeBox>
+  )
+}

package/src/views/Home/index.tsx

@@ -0,0 +1,20 @@
+import { FallbackBoundary } from '../../components/FallbackBoundary'
+import { useCurrentChatState } from '../../context/hooks'
+import { BuiltInAgent } from './BuiltInAgent'
+import { CustomAgent } from './CustomAgent'
+import { HomeProps } from './types'
+
+/**
+ * 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 = (props: HomeProps) => {
+  const agent = useCurrentChatState('agent')
+
+  return (
+    <FallbackBoundary>
+      {agent && !agent.builtIn ? <CustomAgent /> : <BuiltInAgent {...props} />}
+    </FallbackBoundary>
+  )
+}

package/src/views/Home/styled.ts

@@ -0,0 +1,59 @@
+import { styled } from 'styled-components'
+
+export const HomeBox = styled.div`
+  margin: auto;
+
+  .title, .subtitle {
+    font-family: 'San Francisco';
+    font-size: 26px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .title {
+    display: inline-block;
+    background: linear-gradient(72.81deg, #FF9900 0.96%, #FF6633 100%);
+    background-clip: text;
+    margin-bottom: 10px;
+    color: transparent;
+  }
+
+  .subtitle {
+    color: #A0A0A0;
+    margin-bottom: 20px;
+  }
+
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    li {
+      flex: 1;
+    }
+  }
+
+  .avatar {
+    width: 74px;
+    height: 74px;
+    border-radius: 50%;
+  }
+
+  &.custom-agent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+
+    .shortcuts {
+      margin-top: 10px;
+      button {
+        padding: 16px;
+        height: 100px;
+        line-height: 24px;
+        p {
+          overflow: hidden;
+        }
+      }
+    }
+  }
+`

package/src/views/Home/types.ts

@@ -0,0 +1,6 @@
+export interface HomeProps {
+  /**
+   * The name of the user currently logged in.
+   */
+  username: string,
+}

package/src/views/KnowledgeSources.tsx

@@ -105,9 +105,9 @@ const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
         {!!knowledgeSources.length && !filtered.length && (
           <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />
         )}
-        {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+        {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} className="no-data-placeholder" />}
       </div>
-      <Button onClick={onSubmit}>{t.apply}</Button>
+      {!!filtered.length && <Button onClick={onSubmit}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/MessageInput/ButtonGroup.tsx

@@ -4,14 +4,9 @@ import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { listToClass } from '@stack-spot/portal-theme'
 import { useEffect, useRef } from 'react'
 import { useCurrentChatState, useWidget } from '../../context/hooks'
-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.
    */
@@ -38,19 +33,27 @@ interface ButtonGroupProps {
  * 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) => {
+export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
   const t = useMessageInputDictionary()
   const widget = useWidget()
   const featureButtonsWidth = useRef<number | undefined>()
   const featureButtons = useRef<HTMLDivElement>(null)
   const agent = useCurrentChatState('agent')
-  const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack
+  const features = useCurrentChatState('features')
+  const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack || features.editor
 
-  useEffect(() => {
-    if (! featureButtons.current) return
-    featureButtonsWidth.current = featureButtons.current.clientWidth
-    featureButtons.current.style.width = `${featureButtonsWidth.current}px`
-  }, [])
+  useEffect(
+    () => {
+      if (!featureButtons.current) return
+      const isHidden = featureButtons.current.style.width === '0px'
+      featureButtons.current.style.width = 'auto'
+      featureButtonsWidth.current = featureButtons.current.clientWidth
+      if (isHidden) featureButtons.current.style.width = '0px'
+      else featureButtons.current.style.width = `${featureButtonsWidth.current}px`
+    },
+    // don't use the whole features object here, it would make every chat tab change rerun this effect.
+    [features.agent, features.workspace, features.knowledgeSource, features.stack, features.editor],
+  )
 
   return (
     <div className="button-group">

package/src/views/MessageInput/InfoBar.tsx

@@ -11,13 +11,13 @@ interface InfoBadgeProps {
   label: string,
   color: ColorPaletteName,
   dismiss: string,
-  onDismiss: () => void,
+  onDismiss?: () => void,
 }
 
 const InfoBadge = ({ label, color, dismiss, onDismiss }: InfoBadgeProps) => (
   <Badge appearance="square" palette={color} className="info-badge">
     {label}
-    <IconButton onClick={onDismiss} title={dismiss} arial-label={dismiss}><TimesMini /></IconButton>
+    {onDismiss && <IconButton onClick={onDismiss} title={dismiss} arial-label={dismiss}><TimesMini /></IconButton>}
   </Badge>
 )
 
@@ -35,16 +35,25 @@ export const InfoBar = () => {
   const currentWorkspace = useCurrentChatState('workspace')
   const currentKnowledgeSources = useCurrentChatState('knowledgeSources')
   const currentSelection = useCurrentChatState('codeSelection')
+  const features = useCurrentChatState('features')
   const visible = !!(currentStack || currentWorkspace || currentKnowledgeSources?.length || currentSelection)
   const ksToRender = useMemo(() => currentKnowledgeSources?.map(ks => {
-    const onDismiss = () => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id))
+    const onDismiss = features.knowledgeSource
+      ? (() => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id)))
+      : undefined
     return <li key={ks.id}><InfoBadge label={ks.label} dismiss={t.removeKS} color="teal" onDismiss={onDismiss} /></li>
   }), [currentKnowledgeSources])
+  const shouldRenderRemoveAllButton = (
+    currentSelection
+    || (features.stack && currentStack)
+    || (features.workspace && currentWorkspace)
+    || (features.knowledgeSource && !!ksToRender?.length)
+  )
 
   const removeAll = useCallback(() => {
-    chat.set('knowledgeSources', [])
-    chat.set('stack', undefined)
-    chat.set('workspace', undefined)
+    if (features.knowledgeSource) chat.set('knowledgeSources', [])
+    if (features.stack) chat.set('stack', undefined)
+    if (features.workspace) chat.set('workspace', undefined)
     removeCodeSelection()
   }, [])
 
@@ -57,7 +66,9 @@ export const InfoBar = () => {
     <div className={listToClass(['info-bar', visible && 'visible'])}>
       <div className="space"></div>
       <div className="content">
-        <IconButton aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}><Times /></IconButton>
+        {shouldRenderRemoveAllButton && (
+          <IconButton aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}><Times /></IconButton>
+        )}
         <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
           <ul>
             {currentSelection && (
@@ -67,7 +78,12 @@ export const InfoBar = () => {
             )}
             {currentStack && (
               <li>
-                <InfoBadge label={currentStack.label} dismiss={t.removeStack} color="cyan" onDismiss={() => chat.set('stack', undefined)} />
+                <InfoBadge
+                  label={currentStack.label}
+                  dismiss={t.removeStack}
+                  color="cyan"
+                  onDismiss={features.stack ? (() => chat.set('stack', undefined)) : undefined}
+                />
               </li>
             )}
             {currentWorkspace && (
@@ -76,7 +92,7 @@ export const InfoBar = () => {
                   label={currentWorkspace.label}
                   dismiss={t.removeWorkspace}
                   color="pink"
-                  onDismiss={() => chat.set('workspace', undefined)}
+                  onDismiss={features.workspace ? (() => chat.set('workspace', undefined)) : undefined}
                 />
               </li>
             )}

package/src/views/MessageInput/QuickCommandSelector.tsx

@@ -139,7 +139,8 @@ export const QuickCommandSelector = ({ inputRef }: Props) => {
   const filter = useMemo(() => value === '/' || quickCommandRegex.test(value) ? value.substring(1) : undefined, [value])
   const [isClosed, setClosed] = useState(false)
   const selectorRef = useRef<HTMLDivElement>(null)
-  const shouldRender = filter !== undefined && !isClosed
+  const isEnabled = useCurrentChatState('features').quickCommands
+  const shouldRender = isEnabled && filter !== undefined && !isClosed
 
   // Resets the closed state whenever the message input is cleared
   useEffect(() => {

package/src/views/MessageInput/index.tsx

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
 import { ProgressBar } from '../../components/ProgressBar'
 import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
-import { MessageInputFeatures } from '../../features'
 import { quickCommandRegex } from '../../regex'
 import { ChatEntry } from '../../state/ChatEntry'
 import { ButtonGroup } from './ButtonGroup'
@@ -12,19 +11,12 @@ import { InfoBar } from './InfoBar'
 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) => {
+export const MessageInput = () => {
   const t = useMessageInputDictionary()
   const [focused, setFocused] = useState(false)
   const [expanded, setExpanded] = useState(true)
@@ -77,7 +69,6 @@ export const MessageInput = ({ features }: Props) => {
           maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
         />
         <ButtonGroup
-          features={features}
           onSend={onSend}
           onCancel={() => chat.abort()}
           expanded={expanded}

package/src/views/MessageInput/styled.ts

@@ -13,6 +13,7 @@ export const MessageInputBox = styled.div`
 
   > .info-bar {
     margin-top: 8px;
+    margin-bottom: -3px;
     position: relative;
     overflow: hidden;
 
@@ -35,15 +36,18 @@ export const MessageInputBox = styled.div`
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
       height: ${INFO_BAR_HEIGHT}px;
-      padding: 0 4px;
+      padding: 6px 4px 0;
       background-color: ${theme.color.light[500]};
       display: flex;
       flex-direction: row;
-      align-items: center;
       gap: 6px;
 
       .list-overflow {
         max-width: calc(100% - 30px); // close button + gap
+        height: 24px;
+        &:first-child {
+          margin-left: 0.25rem; // space added to the left when the close all button isn't rendered
+        }
       }
 
       ul {

package/src/views/MinimizedHeader.tsx

@@ -6,7 +6,7 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useRef, useState } from 'react'
 import { styled } from 'styled-components'
 import { FadingOverflow } from '../components/FadingOverflow'
-import { useChatState, useChatTabs } from '../context/hooks'
+import { useCurrentChatState } from '../context/hooks'
 import { MinimizedActions } from '../types'
 
 const Header = styled.header`
@@ -53,8 +53,7 @@ const Header = styled.header`
  */
 export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActions) => {
   const t = useTranslate(dictionary)
-  const { active } = useChatTabs()
-  const label = useChatState(active, 'label')
+  const label = useCurrentChatState('label')
   const [collapsed, setCollapsed] = useState(false)
   const ref = useRef<HTMLElement>(null)
   const showButtons = onClose || onCollapse || onExpand

package/src/views/Stacks.tsx

@@ -75,10 +75,11 @@ const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
           }
           className="option-list"
         />}
-        {!!stacks.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
+        {!!stacks.length && !filtered.length &&
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder"/>}
         {!stacks.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
       </div>
-      <Button onClick={submit} disabled={!value}>{t.apply}</Button>
+      {!!filtered.length && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
     </>
   )
 }

package/src/views/Workspaces.tsx

@@ -65,10 +65,11 @@ const WorkspacesPanel = () => {
           }
           className="option-list"
         />}
-        {!!workspaces.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
+        {!!workspaces.length && !filtered.length &&
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
         {!workspaces.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
       </div>
-      <Button onClick={submit} disabled={!value}>{t.apply}</Button>
+      {!!filtered.length && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
     </>
   )
 }

package/dist/views/Agents.d.ts

@@ -1,2 +0,0 @@
-export declare const Agents: () => null;
-//# sourceMappingURL=Agents.d.ts.map

package/dist/views/Agents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Agents.d.ts","sourceRoot":"","sources":["../../src/views/Agents.tsx"],"names":[],"mappings":"AAoEA,eAAO,MAAM,MAAM,YAclB,CAAA"}