@stack-spot/ai-chat-widget 0.2.0 → 0.3.0

package/src/views/ChatHistory/HistoryItem.tsx

@@ -0,0 +1,127 @@
+import { IconBox, Input } from '@citric/core'
+import { Check, Download, EllipsisHorizontal, Pencil, Trash } from '@citric/icons'
+import { IconButton, LoadingCircular } from '@citric/ui'
+import { aiClient } from '@stack-spot/portal-network'
+import { ConversationResponse } from '@stack-spot/portal-network/api/ai'
+import { theme } from '@stack-spot/portal-theme'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { OverlayMenu } from '../../components/OverlayMenu'
+import { useWidget } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { ChatState, MessageInterceptor } from '../../state/ChatState'
+import { ButtonAction } from '../../types'
+import { download } from '../../utils/download'
+import { genericSourcesToKnowledgeSources } from '../../utils/knowledge-source'
+import { useHistoryDictionary } from './dictionary'
+import { HistoryItemBox } from './styled'
+import { findStack, findWorkspace } from './utils'
+
+export const HistoryItem = ({ item, interceptors }: { item: ConversationResponse, interceptors: MessageInterceptor[] }) => {
+  const t = useHistoryDictionary()
+  const [isLoading, setLoading] = useState(false)
+  const [isRenaming, setRenaming] = useState(false)
+  const [renamed, setRenamed] = useState(item.title)
+  const [title, setTitle] = useState(item.title)
+  const [isDeleted, setDeleted] = useState(false)
+  const renameInput = useRef<HTMLInputElement>(null)
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (isRenaming) renameInput.current?.focus() 
+  }, [isRenaming])
+
+  const onRename = useCallback(() => {
+    setRenaming(true)
+  }, [])
+
+  async function onSubmitRename() {
+    setRenaming(false)
+    if (!renamed || renamed === item.title) return
+    try {
+      await aiClient.renameChat.mutate({ conversationId: item.id, conversationUpdateTitleRequest: { title: renamed } })
+      setTitle(renamed)
+      aiClient.chats.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      setRenaming(true)
+    }
+  }
+
+  const onDownload = useCallback(async () => {
+    setLoading(true)
+    try {
+      const content = await aiClient.downloadChat.mutate({ conversationId: item.id })
+      download(`${title}.txt`, content)
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+    setLoading(false)
+  }, [])
+
+  const onDelete = useCallback(async () => {
+    setDeleted(true)
+    try {
+      await aiClient.deleteChat.mutate({ conversationId: item.id })
+      aiClient.chats.invalidate()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+      setDeleted(false)
+    }
+  }, [])
+
+  const onSelect = useCallback(async () => {
+    const tab = widget.chatTabs.getAll().find(c => c.id === item.id)
+    if (tab) return widget.chatTabs.select(item.id)
+    setLoading(true)
+    try {
+      const chat = await aiClient.chat.query({ conversationId: item.id })
+      const [stack, workspace] = await Promise.all([findStack(chat.ai_stack_id), findWorkspace(chat.workspace_id)])
+      widget.chatTabs.add(new ChatState({
+        id: chat.id,
+        initial: { label: chat.title, stack, workspace },
+        interceptors,
+        entries: chat.history?.map(item => new ChatEntry({
+          agent: item.agent === 'USER' ? 'user' : 'bot',
+          content: item.content,
+          type: item.agent === 'USER' ? 'text' : 'md',
+          agentId: item.custom_agent?.id,
+          messageId: item.message_id,
+          knowledgeSources: genericSourcesToKnowledgeSources(item.sources),
+          updated: item.updated,
+        })),
+      }))
+      widget.chatTabs.select(chat.id)
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+    setLoading(false)
+  }, [])
+
+  const actions: ButtonAction[] = [
+    { label: t.rename, onClick: onRename, icon: <Pencil /> },
+    { label: t.download, onClick: onDownload, icon: <Download /> },
+    { label: t.delete, onClick: onDelete, icon: <Trash />, color: theme.color.danger[500] },
+  ]
+
+  return isDeleted ? null : (
+    <HistoryItemBox className={isLoading ? 'loading' : ''}>
+      {isRenaming ? (
+        <>
+          <Input ref={renameInput} value={renamed} onChange={e => setRenamed(e.target.value)} />
+          <IconButton onClick={onSubmitRename}><Check /></IconButton>
+        </>
+      ) : (
+        <>
+          <button className="label" onClick={onSelect} disabled={isLoading}>{title}</button>
+          {isLoading ? <LoadingCircular size="xs" /> : <OverlayMenu actions={actions} position="left">
+            <IconBox><EllipsisHorizontal /></IconBox>
+          </OverlayMenu>}
+        </>
+      )}
+    </HistoryItemBox>
+  )
+}

package/src/views/ChatHistory/dictionary.ts

@@ -0,0 +1,20 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    title: 'History',
+    description: 'Manage or continue previous conversations.',
+    rename: 'Rename',
+    download: 'Download',
+    delete: 'Delete',
+  },
+  pt: {
+    title: 'Histórico',
+    description: 'Gerencie ou retome conversas anteriores.',
+    rename: 'Renomear',
+    download: 'Download',
+    delete: 'Remover',
+  },
+} satisfies Dictionary
+
+export const useHistoryDictionary = () => useTranslate(dictionary)

package/src/views/ChatHistory/index.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+import { FallbackBoundary } from '../../components/FallbackBoundary'
+import { useWidget, useWidgetState } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { MessageInterceptor } from '../../state/ChatState'
+import { ChatHistoryPanel } from './ChatHistoryPanel'
+import { useHistoryDictionary } from './dictionary'
+
+export const ChatHistory = ({ interceptors }: { interceptors: MessageInterceptor[] }) => {
+  const t = useHistoryDictionary()
+  const panel = useWidgetState('panel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'history') open(
+      <FallbackBoundary><ChatHistoryPanel interceptors={interceptors} /></FallbackBoundary>,
+      {
+        title: t.title,
+        description: t.description,
+        onClose: () => widget.set('panel', undefined),
+      },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+
+
+

package/src/views/ChatHistory/styled.ts

@@ -0,0 +1,60 @@
+import { IconBox } from '@citric/core'
+import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const HistoryItemBox = styled.div`
+  padding: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  gap: 20px;
+
+  &:hover:not(.loading) {
+    background-color: ${theme.color.light[600]};
+  }
+
+  &.loading {
+    cursor: progress;
+
+    > svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  button.label {
+    opacity: 0.8;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    color: ${theme.color.light.contrastText};
+    flex: 1;
+    display: flex;
+    cursor: pointer;
+    text-align: left;
+
+    &:disabled {
+      opacity: 0.4;
+    }
+  }
+
+  ${IconBox}, ${IconButton} {
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    width: auto;
+    height: auto;
+
+    svg {
+      width: 12px;
+    }
+  }
+
+  ${IconButton} svg {
+    width: 16px;
+  }
+`

package/src/views/ChatHistory/utils.ts

@@ -0,0 +1,26 @@
+import { aiClient, workspaceClient } from '@stack-spot/portal-network'
+import { ChatProperties } from '../../state/ChatState'
+
+export async function findStack(id: string | null): Promise<ChatProperties['stack'] | undefined> {
+  if (!id) return
+  try {
+    const stacks = await aiClient.aiStacks.query({})
+    return { id, label: stacks.find(s => s.id === id)?.name || id }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    return { id, label: id }
+  }
+}
+
+export async function findWorkspace(id: string | null): Promise<ChatProperties['workspace'] | undefined> {
+  if (!id) return
+  try {
+    const ws = await workspaceClient.workspace.query({ workspaceId: id })
+    return { id, label: ws.name }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error)
+    return { id, label: id }
+  }
+}

package/src/views/ChatTabSelection.tsx

@@ -35,7 +35,7 @@ export const ChatTabSelection = ({ history, interceptors }: Props) => {
           label: t.openHistory,
           className: 'test',
           style: { marginLeft: 'auto' },
-          onClick: () => { /* todo */ },
+          onClick: () => widget.set('panel', 'history'),
         })
       }
       return actions

package/src/views/KnowledgeSources.tsx

@@ -4,12 +4,20 @@ import { Placeholder } from '@stack-spot/portal-components/Placeholder'
 import { aiClient } from '@stack-spot/portal-network'
 import { KnowledgeSourceItemResponse, VisibilityLevelEnum } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useEffect, useMemo, useState } from 'react'
+import { difference, uniqBy } from 'lodash'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DescribedCheckboxGroup } from '../components/form/DescribedCheckboxGroup'
 import { IconInput } from '../components/IconInput'
 import { RightPanelTabs } from '../components/RightPanelTabs'
 import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
 import { useRightPanel } from '../right-panel/hooks'
+import { ChatProperties } from '../state/ChatState'
+
+interface TabProps {
+  visibility: VisibilityLevelEnum,
+  onSubmit: () => void,
+  allKS: React.MutableRefObject<ChatProperties['knowledgeSources']>,
+}
 
 export const KnowledgeSources = () => {
   const t = useTranslate(dictionary)
@@ -29,24 +37,33 @@ export const KnowledgeSources = () => {
 
 const KnowledgeSourcesPanel = () => {
   const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+  const allKS = useRef(chat.get('knowledgeSources') ?? [])
+  const { close } = useRightPanel()
+
+  const onSubmit = useCallback(() => {
+    chat.set('knowledgeSources', allKS.current)
+    close()
+  }, [chat])
+
+  useEffect(() => {
+    allKS.current = chat.get('knowledgeSources') ?? []
+  }, [chat])
   
-  return <RightPanelTabs tabs={[
-    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" /> },
-    { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" /> },
-    { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" /> },
+  return <RightPanelTabs key={chat.id} tabs={[
+    { title: t.personal, content: <KnowledgeSourcesTab key="personal" visibility="personal" allKS={allKS} onSubmit={onSubmit} /> },
+    { title: t.shared, content: <KnowledgeSourcesTab key="shared" visibility="shared" allKS={allKS} onSubmit={onSubmit} /> },
+    { title: t.account, content: <KnowledgeSourcesTab key="account" visibility="account" allKS={allKS} onSubmit={onSubmit} /> },
   ]} />
 }
 
-const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
+const KnowledgeSourcesTab = ({ visibility, allKS, onSubmit }: TabProps) => {
   const t = useTranslate(dictionary)
-  const { close } = useRightPanel()
-  const chat = useCurrentChat()
   const [filter, setFilter] = useState('')
   const knowledgeSources = aiClient.knowledgeSources.useQuery({ visibility, order: 'a-to-z' })
-  const [hasChanged, setChanged] = useState(false)
   const [value, setValue] = useState<KnowledgeSourceItemResponse[]>((() => {
-    const currentlySelected = chat.get('knowledgeSources')?.map(ks => ks.id)
-    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.id))
+    const currentlySelected = allKS.current?.map(ks => ks.id)
+    return knowledgeSources.filter(ks => currentlySelected?.includes(ks.slug))
   })())
   const filtered = useMemo(
     () => filter
@@ -55,10 +72,15 @@ const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }
     [knowledgeSources, filter, value],
   )
 
-  function submit() {
-    if (value) chat.set('knowledgeSources', value.map(({ id, name }) => ({ id, label: name })))
-    close()
-  }
+  const onChange = useCallback((newValue: KnowledgeSourceItemResponse[]) => {
+    setValue((current) => {
+      const added = difference(newValue, current)
+      const removed = difference(current, newValue)
+      allKS.current = allKS.current?.filter(ks => !removed.some(r => r.slug === ks.id)) ?? []
+      allKS.current = uniqBy([...allKS.current, ...added.map(ks => ({ id: ks.slug, label: ks.name }))], 'id')
+      return newValue
+    })
+  }, [])
 
   return (
     <>
@@ -68,10 +90,7 @@ const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }
           options={filtered}
           keygen={ks => ks.id}
           value={value}
-          onChange={(value) => {
-            setValue(value)
-            setChanged(true)
-          }}
+          onChange={onChange}
           renderLabel={ks => ks.name}
           renderDescription={ks => ks.description}
           optionClassName={ks => (filter && !ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && value.includes(ks))
@@ -85,7 +104,7 @@ const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }
         )}
         {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
       </div>
-      <Button onClick={submit} disabled={!hasChanged}>{t.apply}</Button>
+      <Button onClick={onSubmit}>{t.apply}</Button>
     </>
   )
 }

package/src/views/Stacks.tsx

@@ -29,8 +29,9 @@ export const Stacks = () => {
 
 const StacksPanel = () => {
   const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
   
-  return <RightPanelTabs tabs={[
+  return <RightPanelTabs key={chat.id} 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" /> },

package/src/views/Workspaces.tsx

@@ -16,13 +16,14 @@ export const Workspaces = () => {
   const panel = useWidgetState('panel')
   const { open } = useRightPanel()
   const widget = useWidget()
+  const chat = useCurrentChat()
 
   useEffect(() => {
     if (panel === 'workspace') open(
-      <RightPanelForm><WorkspacesPanel /></RightPanelForm>,
+      <RightPanelForm><WorkspacesPanel key={chat.id} /></RightPanelForm>,
       { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
     )
-  }, [panel, t])
+  }, [panel, t, chat.id])
 
   return null
 }

package/dist/hooks/chat-scroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-scroll.d.ts","sourceRoot":"","sources":["../../src/hooks/chat-scroll.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAMzF"}

package/dist/hooks/chat-scroll.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-scroll.js","sourceRoot":"","sources":["../../src/hooks/chat-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;GAIG;AACH,MAAM,UAAU,2BAA2B,CAAC,GAAiC,EAAE,IAAW;IACxF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;QAClD,IAAI,CAAC,IAAI;YAAE,OAAM;QACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}