@stack-spot/ai-chat-widget 0.1.0

package/src/views/Workspaces.tsx

@@ -0,0 +1,88 @@
+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 isWorkspaceSelectionOpen = useWidgetState('isWorkspaceSelectionOpen')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (isWorkspaceSelectionOpen) open(
+      <RightPanelForm><WorkspacesPanel /></RightPanelForm>,
+      { title: t.title, description: t.description, onClose: () => widget.set('isWorkspaceSelectionOpen', false) },
+    )
+  }, [isWorkspaceSelectionOpen, t])
+
+  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.includes(filter)) ? '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

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "module": "ESNext",
+    "outDir": "dist",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "stripInternal": true
+  },
+  "include": ["src"]
+}