@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,91 +0,0 @@
-import { ChevronRight, Code, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-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 {
-  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 agent = useCurrentChatState('agent')
-  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} className="agent" onClick={() => widget.set('panel', 'agent')}>
-              {agent?.image ? <img src={agent.image} /> : <MiniLogo />}
-            </IconButton>
-          )}
-          {features.workspace && (
-            <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('panel', 'workspace')}>
-              <Workspace />
-            </IconButton>
-          )}
-          {features.knowledgeSource && (
-            <IconButton
-              aria-label={t.knowledgeSource}
-              title={t.knowledgeSource}
-              onClick={() => widget.set('panel', 'ks')}
-            >
-              <KnowledgeSource />
-            </IconButton>
-          )}
-          {features.stack && (
-            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('panel', 'stack')}>
-              <Stack />
-            </IconButton>
-          )}
-          {features.editor && (
-            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('panel', 'editor')}>
-              <Code />
-            </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

@@ -1,82 +0,0 @@
-import { Times, TimesMini } from '@citric/icons'
-import { Badge, IconButton } from '@citric/ui'
-import { loader } from '@monaco-editor/react'
-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 currentSelection = useCurrentChatState('codeSelection')
-  const visible = !!(currentStack || currentWorkspace || currentKnowledgeSources?.length || currentSelection)
-  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)
-    removeCodeSelection()
-  }, [])
-
-  const removeCodeSelection = useCallback(() => {
-    const editor = loader.__getMonacoInstance()?.editor
-    editor?.getEditors()[0].setSelection({ startLineNumber: 0, endLineNumber: 0, endColumn: 0, startColumn: 0 })
-  }, [])
-
-  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>
-            {currentSelection && (
-              <li>
-                <InfoBadge label={t.selected} dismiss={t.removeSelection} color="blue" onDismiss={removeCodeSelection} />
-              </li>
-            )}
-            {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/Workspaces.tsx

@@ -1,92 +0,0 @@
-import { Button } from '@citric/core'
-import { Search } from '@citric/icons'
-import { Placeholder } from '@stack-spot/portal-components/Placeholder'
-import { workspaceClient } from '@stack-spot/portal-network'
-import { WorkspaceReadResponse } from '@stack-spot/portal-network/api/workspace'
-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 { RightPanelForm } from '../components/RightPanelForm'
-import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
-import { useRightPanel } from '../right-panel/hooks'
-
-export const Workspaces = () => {
-  const t = useTranslate(dictionary)
-  const panel = useWidgetState('panel')
-  const { open } = useRightPanel()
-  const widget = useWidget()
-  const chat = useCurrentChat()
-
-  useEffect(() => {
-    if (panel === 'workspace') open(
-      <RightPanelForm><WorkspacesPanel key={chat.id} /></RightPanelForm>,
-      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
-    )
-  }, [panel, t, chat.id])
-
-  return null
-}
-
-const WorkspacesPanel = () => {
-  const t = useTranslate(dictionary)
-  const { close } = useRightPanel()
-  const chat = useCurrentChat()
-  const [filter, setFilter] = useState('')
-  const workspaces = workspaceClient.workspaces.useQuery({ aclOnly: false })
-  const [value, setValue] = useState<WorkspaceReadResponse | undefined>(workspaces.find(w => w.id === chat.get('workspace')?.id))
-  const filtered = useMemo(
-    () => filter ? workspaces.filter(w => w === value || w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : workspaces,
-    [workspaces, filter, value],
-  )
-
-  function submit() {
-    if (value) chat.set('workspace', { 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={w => w.id}
-          value={value}
-          onChange={setValue}
-          renderLabel={w => w.name}
-          renderDescription={w => w.description}
-          optionClassName={w => (w === value && filter && !w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-            ? 'filtered-out'
-            : ''
-          }
-          className="option-list"
-        />}
-        {!!workspaces.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
-        {!workspaces.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
-      </div>
-      <Button onClick={submit} disabled={!value}>{t.apply}</Button>
-    </>
-  )
-}
-
-const dictionary = {
-  en: {
-    title: 'Workspaces',
-    description: 'By selecting a workspace, its Knowledge Sources (KSs) will be consulted to generate the answers.',
-    apply: 'Apply',
-    noSearchResults: "Your search didn't yield results.",
-    noSearchResultsDescription: 'Please, try another search term.',
-    noData: 'There are no workspaces yet.',
-    noDataDescription: 'Use the AI portal to create new workspaces.',
-  },
-  pt: {
-    title: 'Workspaces',
-    description: 'Ao selecionar um workspace, seus Knowledge Sources (KSs) serão consultados para gerar as respostas.',
-    apply: 'Aplicar',
-    noSearchResults: 'Sua busca não produziu resultados',
-    noSearchResultsDescription: 'Por favor, tente outra busca.',
-    noData: 'Ainda não há workspace.',
-    noDataDescription: 'Use o Portal AI para criar novos workspaces.',
-  },
-} satisfies Dictionary