@stack-spot/ai-chat-widget 0.1.0

package/src/views/MessageInput/ButtonGroup.tsx

@@ -0,0 +1,84 @@
+import { ChevronRight, FaceSmile, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useEffect, useRef } from 'react'
+import { useWidget } from '../../context/hooks'
+import { MessageInputFeatures } from '../../features'
+import { useMessageInputDictionary } from './dictionary'
+
+interface ButtonGroupProps {
+  features: MessageInputFeatures,
+  expanded: boolean,
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>,
+  isLoading: boolean,
+  onSend: () => void,
+  onCancel?: () => void,
+}
+
+export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
+  const t = useMessageInputDictionary()
+  const widget = useWidget()
+  const featureButtonsWidth = useRef<number | undefined>()
+  const featureButtons = useRef<HTMLDivElement>(null)
+  const hasFeatureButtons = features.agent || features.workspace || features.knowledgeSource || features.stack
+
+  useEffect(() => {
+    if (! featureButtons.current) return
+    featureButtonsWidth.current = featureButtons.current.clientWidth
+    featureButtons.current.style.width = `${featureButtonsWidth.current}px`
+  }, [])
+
+  return (
+    <div className="button-group">
+      {hasFeatureButtons && <>
+        <div
+          ref={featureButtons}
+          className={listToClass(['feature-buttons', expanded && 'expanded'])}
+          style={{ width: expanded ? featureButtonsWidth.current : 0 }}
+        >
+          {features.agent && (
+            <IconButton aria-label={t.agent} title={t.agent} onClick={() => widget.set('isAgentSelectionOpen', true)}>
+              <FaceSmile />
+            </IconButton>
+          )}
+          {features.workspace && (
+            <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('isWorkspaceSelectionOpen', true)}>
+              <Workspace />
+            </IconButton>
+          )}
+          {features.knowledgeSource && (
+            <IconButton
+              aria-label={t.knowledgeSource}
+              title={t.knowledgeSource}
+              onClick={() => widget.set('isKnowledgeSourceSelectionOpen', true)}
+            >
+              <KnowledgeSource />
+            </IconButton>
+          )}
+          {features.stack && (
+            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('isStackSelectionOpen', true)}>
+              <Stack />
+            </IconButton>
+          )}
+        </div>
+        <IconButton
+          title={expanded ? t.collapse : t.expand}
+          className={listToClass(['expand', !expanded && 'collapsed'])}
+          aria-label={expanded ? t.collapse : t.expand}
+          onClick={() => setExpanded(v => !v)}
+        >
+          <ChevronRight />
+        </IconButton>
+      </>}
+      {isLoading ? (
+        <IconButton aria-label={t.cancel} onClick={onCancel} className="send" title={t.cancel}>
+          <Times />
+        </IconButton>
+      ) : (
+        <IconButton aria-label={t.send} onClick={onSend} className="send" title={t.send}>
+          <Send />
+        </IconButton>
+      )}
+    </div>
+  )
+}

package/src/views/MessageInput/InfoBar.tsx

@@ -0,0 +1,69 @@
+import { Times, TimesMini } from '@citric/icons'
+import { Badge, IconButton } from '@citric/ui'
+import { ColorPaletteName, listToClass } from '@stack-spot/portal-theme'
+import { useCallback, useMemo } from 'react'
+import { FadingOverflow } from '../../components/FadingOverflow'
+import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
+import { useMessageInputDictionary } from './dictionary'
+
+interface InfoBadgeProps {
+  label: string,
+  color: ColorPaletteName,
+  dismiss: string,
+  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>
+  </Badge>
+)
+
+export const InfoBar = () => {
+  const t = useMessageInputDictionary()
+  const chat = useCurrentChat()
+  const currentStack = useCurrentChatState('stack')
+  const currentWorkspace = useCurrentChatState('workspace')
+  const currentKnowledgeSources = useCurrentChatState('knowledgeSources')
+  const visible = !!(currentStack || currentWorkspace || currentKnowledgeSources?.length)
+  const ksToRender = useMemo(() => currentKnowledgeSources?.map(ks => {
+    const onDismiss = () => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id))
+    return <li key={ks.id}><InfoBadge label={ks.label} dismiss={t.removeKS} color="teal" onDismiss={onDismiss} /></li>
+  }), [currentKnowledgeSources])
+
+  const removeAll = useCallback(() => {
+    chat.set('knowledgeSources', [])
+    chat.set('stack', undefined)
+    chat.set('workspace', undefined)
+  }, [])
+
+  return (
+    <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>
+        <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
+          <ul>
+            {currentStack && (
+              <li>
+                <InfoBadge label={currentStack.label} dismiss={t.removeStack} color="cyan" onDismiss={() => chat.set('stack', undefined)} />
+              </li>
+            )}
+            {currentWorkspace && (
+              <li>
+                <InfoBadge
+                  label={currentWorkspace.label}
+                  dismiss={t.removeWorkspace}
+                  color="pink"
+                  onDismiss={() => chat.set('workspace', undefined)}
+                />
+              </li>
+            )}
+            {ksToRender}
+          </ul>
+        </FadingOverflow>
+      </div>
+    </div>
+  )
+}

package/src/views/MessageInput/dictionary.ts

@@ -0,0 +1,36 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    stack: 'Select stack',
+    workspace: 'Select workspace',
+    knowledgeSource: 'Select knowledge sources',
+    agent: 'Select agent',
+    collapse: 'Hide buttons',
+    expand: 'Show buttons',
+    send: 'Send message',
+    placeholder: 'Type your prompt',
+    cancel: 'Cancel',
+    removeConfig: 'Remove all the configuration',
+    removeStack: 'Stop using the current stack',
+    removeWorkspace: 'Stop using the current workspace',
+    removeKS: 'Stop using this knowledge source',
+  },
+  pt: {
+    stack: 'Selecionar stack',
+    workspace: 'Selecionar workspace',
+    knowledgeSource: 'Selecionar knowledge sources',
+    agent: 'Selecionar agente',
+    collapse: 'Esconder botões',
+    expand: 'Mostrar botões',
+    send: 'Enviar mensagem',
+    placeholder: 'Digite sua pergunta',
+    cancel: 'Cancelar',
+    removeConfig: 'Remover todas as configurações',
+    removeStack: 'Parar de usar a stack atual',
+    removeWorkspace: 'Parar de usar o workspace atual',
+    removeKS: 'Parar de usar este knowledge source',
+  },
+} satisfies Dictionary
+
+export const useMessageInputDictionary = () => useTranslate(dictionary)

package/src/views/MessageInput/index.tsx

@@ -0,0 +1,79 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { last } from 'lodash'
+import { useCallback, 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 { ChatEntry } from '../../state/ChatEntry'
+import { ButtonGroup } from './ButtonGroup'
+import { useMessageInputDictionary } from './dictionary'
+import { InfoBar } from './InfoBar'
+import { MessageInputBox } from './styled'
+
+interface Props {
+  features: MessageInputFeatures,
+}
+
+const MAX_INPUT_HEIGHT = 300
+const MAX_INPUT_HEIGHT_MINIMIZED = 30
+
+export const MessageInput = ({ features }: Props) => {
+  const t = useMessageInputDictionary()
+  const [focused, setFocused] = useState(false)
+  const [expanded, setExpanded] = useState(true)
+  const expansionLocked = useRef(false)
+  const chat = useCurrentChat()
+  const isLoading = useCurrentChatState('isLoading') ?? false
+  const value = useCurrentChatState('nextMessage') ?? ''
+  const isMinimized = useWidgetState('isMinimized')
+
+  const onSend = useCallback(async () => {
+    const message = chat.get('nextMessage')
+    if (!message) return
+    chat.pushMessage(ChatEntry.createUserEntry(message))
+    chat.set('nextMessage', '')
+    setFocused(false)
+  }, [chat])
+
+  const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!event.shiftKey && event.key === 'Enter') {
+      event.preventDefault()
+      onSend()
+    }
+  }, [onSend])
+
+  return (
+    <MessageInputBox aria-busy={isLoading} className="message-input">
+      <ProgressBar visible={isLoading} shimmer />
+      <InfoBar />
+      <div className={listToClass(['action-box', focused && 'focused', isLoading && 'disabled'])}>
+        <AdaptiveTextArea
+          disabled={isLoading}
+          placeholder={t.placeholder}
+          onChange={e => chat.set('nextMessage', e.target.value)}
+          value={value}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onKeyDown={onKeyDown}
+          onIncreaseSize={() => setExpanded(false)}
+          onResetSize={() => !expansionLocked.current && setExpanded(true)}
+          maxHeight={isMinimized ? MAX_INPUT_HEIGHT_MINIMIZED : MAX_INPUT_HEIGHT}
+        />
+        <ButtonGroup
+          features={features}
+          onSend={onSend}
+          onCancel={() => last(chat.getMessages())?.abort()}
+          expanded={expanded}
+          isLoading={isLoading}
+          setExpanded={(value) => {
+            setExpanded(value)
+            expansionLocked.current = expanded
+          }}
+        />
+      </div>
+    </MessageInputBox>
+  )
+}
+
+

package/src/views/MessageInput/styled.ts

@@ -0,0 +1,196 @@
+import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+const INFO_BAR_HEIGHT = 42
+const INFO_BAR_DISPLACEMENT = 4
+
+export const MessageInputBox = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > .info-bar {
+    margin-top: 8px;
+    position: relative;
+    overflow: hidden;
+
+    &.visible {
+      > .space {
+        height: ${INFO_BAR_HEIGHT - INFO_BAR_DISPLACEMENT}px;
+      }
+    }
+
+    > .space {
+      height: 0;
+      transition: height 0.4s;
+    }
+
+    > .content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      height: ${INFO_BAR_HEIGHT}px;
+      padding: 0 4px;
+      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
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .info-badge > span {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+        line-height: 0.75rem;
+        white-space: nowrap;
+
+        ${IconButton} {
+          padding: 4px 0;
+          background: none;
+          border: none;
+          width: auto;
+          height: auto;
+
+          svg {
+            width: auto;
+            height: 12px;
+          }
+        }
+      }
+    }
+  }
+
+  .action-box {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: end;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[500]};
+    background-color: ${theme.color.light[300]};
+    padding: 8px 10px;
+    transition: border-color 0.3s, background-color 0.3s;
+
+    &.focused {
+      border-color: ${theme.color.primary[500]};
+    }
+
+    &.disabled {
+      background-color: ${theme.color.light[500]};
+    }
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 3px;
+
+    button {
+      border: none;
+      border-radius: 2px;
+      opacity: 0.6;
+      transition: background-color 0.2s, opacity 0.2s;
+      background-color: transparent;
+      padding: 0;
+
+      svg {
+        fill: ${theme.color.light[700]};
+        width: 16px;
+        height: 16px;
+      }
+
+      &:hover {
+        background-color: ${theme.color.light[500]};
+      }
+
+      &.send {
+        background-color: ${theme.color.inverse[500]};
+        &:hover {
+          opacity: 1;
+        }
+        svg {
+          fill: ${theme.color.inverse.contrastText};
+        }
+      }
+
+      &.expand {
+        svg {
+          transition: transform 0.3s;
+        }
+      }
+
+      &.collapsed {
+        svg {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .feature-buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      white-space: nowrap;
+      flex-wrap: nowrap;
+      transition: width 0.3s;
+      gap: 4px;
+      overflow-x: hidden;
+
+      &.expanded {
+        /* lets the overflow be hidden only when opened or not animated */
+        overflow-x: visible;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-x: hidden;
+          }
+          99% {
+            overflow-x: hidden;
+          }
+          100% {
+            overflow-x: visible;
+          }
+        }
+      }
+    }
+
+    ${IconButton} {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  textarea {
+    resize: none;
+    border: none;
+    flex: 1;
+    padding: 0;
+    height: 30px;
+    padding: 2px 0;
+    transition: height 0.3s;
+    background-color: transparent;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+`

package/src/views/MinimizedHeader.tsx

@@ -0,0 +1,94 @@
+import { Text } from '@citric/core'
+import { ChevronDown, Times } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { listToClass } from '@stack-spot/portal-theme'
+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 { MinimizedActions } from '../types'
+
+const Header = styled.header`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 18px;
+  height: 48px;
+  padding: 0 20px;
+  max-width: 1200px;
+  width: calc(100% - 40px);
+
+  .title {
+    flex: 1;
+    white-space: nowrap;
+    max-width: calc(100% - 78px); // size of the button-group + gap
+    height: 15px; // fixes weird problem where the text has 14px instead of 15px of height
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 18px;
+  }
+
+  .collapse {
+    background-color: transparent;
+    border-color: transparent;
+    padding: 0;
+    width: auto;
+    height: auto;
+    transition: transform 0.3s;
+
+    &.collapsed {
+      transform: rotate(-180deg);
+    }
+  }
+`
+
+export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActions) => {
+  const t = useTranslate(dictionary)
+  const { active } = useChatTabs()
+  const label = useChatState(active, 'label')
+  const [collapsed, setCollapsed] = useState(false)
+  const ref = useRef<HTMLElement>(null)
+  const showButtons = onClose || onCollapse || onExpand
+
+  const toggleCollapsed = useCallback(() => {
+    if (collapsed) onExpand?.()
+    else onCollapse?.()
+    setCollapsed(!collapsed)
+  }, [collapsed])
+
+  return (
+    <Header ref={ref} className="minimized-header">
+      <FadingOverflow className="title"><Text title={label}>{label}</Text></FadingOverflow>
+      {showButtons && <div className="button-group">
+        {(onExpand || onCollapse) && <IconButton
+          title={collapsed ? t.expand : t.collapse}
+          aria-label={collapsed ? t.expand : t.collapse}
+          className={listToClass(['collapse', collapsed && 'collapsed'])}
+          onClick={toggleCollapsed}
+        >
+          <ChevronDown />
+        </IconButton>}
+        {onClose && <IconButton title={t.close} aria-label={t.close} onClick={onClose}><Times /></IconButton>}
+      </div>}
+    </Header>
+  )
+}
+
+const dictionary = {
+  en: {
+    collapse: 'Minimize',
+    expand: 'Expand',
+    close: 'Close',
+  },
+  pt: {
+    collapse: 'Minimizar',
+    expand: 'Expandir',
+    close: 'Fechar',
+  },
+} satisfies Dictionary
+

package/src/views/Stacks.tsx

@@ -0,0 +1,104 @@
+import { Button } from '@citric/core'
+import { Search } from '@citric/icons'
+import { Placeholder } from '@stack-spot/portal-components/Placeholder'
+import { aiClient } from '@stack-spot/portal-network'
+import { GetAiStackResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo, useState } from 'react'
+import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
+import { IconInput } from '../components/IconInput'
+import { RightPanelTabs } from '../components/RightPanelTabs'
+import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+
+export const Stacks = () => {
+  const t = useTranslate(dictionary)
+  const isStackSelectionOpen = useWidgetState('isStackSelectionOpen')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (isStackSelectionOpen) open(
+      <StacksPanel />,
+      { title: t.title, description: t.description, onClose: () => widget.set('isStackSelectionOpen', false) },
+    )
+  }, [isStackSelectionOpen, t])
+
+  return null
+}
+
+const StacksPanel = () => {
+  const t = useTranslate(dictionary)
+  
+  return <RightPanelTabs tabs={[
+    { title: t.personal, content: <StacksTab key="personal" visibility="personal" /> },
+    { title: t.shared, content: <StacksTab key="shared" visibility="shared" /> },
+    { title: t.account, content: <StacksTab key="account" visibility="account" /> },
+  ]} />
+}
+
+const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
+  const t = useTranslate(dictionary)
+  const { close } = useRightPanel()
+  const chat = useCurrentChat()
+  const [filter, setFilter] = useState('')
+  const stacks = aiClient.aiStacks.useQuery({ visibility, order: 'a-to-z' })
+  const [value, setValue] = useState<GetAiStackResponse | undefined>(stacks.find(s => s.id === chat.get('stack')?.id))
+  const filtered = useMemo(
+    () => filter ? stacks.filter(s => s === value || s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : stacks,
+    [stacks, filter, value],
+  )
+
+  function submit() {
+    if (value) chat.set('stack', { id: value.id, label: value.name })
+    close()
+  }
+
+  return (
+    <>
+      <div className="content">
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+        {!!filtered.length && <DescribedRadioGroup
+          options={filtered}
+          keygen={s => s.id}
+          value={value}
+          onChange={setValue}
+          renderLabel={s => s.name}
+          renderDescription={s => s.use_case}
+          optionClassName={s => (s === value && filter && !s.name.includes(filter)) ? 'filtered-out' : ''}
+          className="option-list"
+        />}
+        {!!stacks.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
+        {!stacks.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+      </div>
+      <Button onClick={submit} disabled={!value}>{t.apply}</Button>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Stacks AI',
+    description: 'By selecting an AI Stack, it will be consulted to generate the answers.',
+    personal: 'Personal',
+    shared: 'Shared',
+    account: 'Account',
+    apply: 'Apply',
+    noSearchResults: "Your search didn't yield results.",
+    noSearchResultsDescription: 'Please, try another search term.',
+    noData: 'There are no stacks in this category yet.',
+    noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new stacks.',
+  },
+  pt: {
+    title: 'Stacks AI',
+    description: 'Ao selecionar uma Stack AI, ela será consultada para gerar as respostas.',
+    personal: 'Pessoal',
+    shared: 'Compartilhado',
+    account: 'Conta',
+    apply: 'Aplicar',
+    noSearchResults: 'Sua busca não produziu resultados.',
+    noSearchResultsDescription: 'Por favor, tente outra busca.',
+    noData: 'Ainda não há stacks nesta categoria.',
+    noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novas stacks.',
+  },
+} satisfies Dictionary