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

package/src/views/KSDocument.tsx

@@ -0,0 +1,58 @@
+import { Flex, IconBox, Text } from '@citric/core'
+import { Score } from '@citric/icons'
+import { aiClient } from '@stack-spot/portal-network'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect } from 'react'
+import { Code } from '../components/Code'
+import { useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { extractCodeFromKSDocument } from '../utils/knowledge-source'
+
+export const KSDocument = () => {
+  const t = useTranslate(dictionary)
+  const panel = useWidgetState('panel')
+  const ks = useWidgetState('currentKSInPanel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'ks-details' && ks) open(
+      <KSDocumentPanel documentId={ks.documentId} slug={ks.slug} />,
+      {
+        title: (
+          <Flex flexDirection="row" alignItems="center" flex="1">
+            <Text appearance="h5" style={{ flex: 1 }}>{ks.name}</Text>
+            <Flex flexDirection="row" alignItems="center" style={{ gap: '5px' }} title="Score" aria-label="Score">
+              <IconBox><Score /></IconBox>
+              <Text>{ks.score.toFixed(2)}</Text>
+            </Flex>
+          </Flex>
+        ),
+        description: t.description,
+        onClose: () => widget.set('panel', undefined),
+      },
+    )
+  }, [panel, ks, t])
+
+  return null
+}
+
+const KSDocumentPanel = ({ slug, documentId }: { slug: string, documentId: string }) => {
+  const document = aiClient.knowledgeSourceDocument.useQuery({ slug, customId: documentId })
+  const { snippet, language, text } = extractCodeFromKSDocument(document)
+  return (
+    <>
+      {text && <Text>{text}</Text>}
+      <Code language={language}>{snippet}</Code>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    description: 'Knowledge Source details',
+  },
+  pt: {
+    description: 'Detalhes do Knowledge Source',
+  },
+} satisfies Dictionary

package/src/views/KnowledgeSources.tsx

@@ -13,16 +13,16 @@ import { useRightPanel } from '../right-panel/hooks'
 
 export const KnowledgeSources = () => {
   const t = useTranslate(dictionary)
-  const isKnowledgeSourceSelectionOpen = useWidgetState('isKnowledgeSourceSelectionOpen')
+  const panel = useWidgetState('panel')
   const { open } = useRightPanel()
   const widget = useWidget()
 
   useEffect(() => {
-    if (isKnowledgeSourceSelectionOpen) open(
+    if (panel === 'ks') open(
       <KnowledgeSourcesPanel />,
-      { title: t.title, description: t.description, onClose: () => widget.set('isKnowledgeSourceSelectionOpen', false) },
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
     )
-  }, [isKnowledgeSourceSelectionOpen, t])
+  }, [panel, t])
 
   return null
 }
@@ -74,7 +74,10 @@ const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }
           }}
           renderLabel={ks => ks.name}
           renderDescription={ks => ks.description}
-          optionClassName={ks => (filter && !ks.name.includes(filter) && value.includes(ks)) ? 'filtered-out' : ''}
+          optionClassName={ks => (filter && !ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && value.includes(ks))
+            ? 'filtered-out'
+            : ''
+          }
           className="option-list"
         />}
         {!!knowledgeSources.length && !filtered.length && (

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,8 +1,9 @@
-import { ChevronRight, FaceSmile, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
+import { ChevronRight, 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 { useWidget } from '../../context/hooks'
+import { useCurrentChatState, useWidget } from '../../context/hooks'
 import { MessageInputFeatures } from '../../features'
 import { useMessageInputDictionary } from './dictionary'
 
@@ -20,6 +21,7 @@ export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded,
   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(() => {
@@ -37,12 +39,12 @@ export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded,
           style={{ width: expanded ? featureButtonsWidth.current : 0 }}
         >
           {features.agent && (
-            <IconButton aria-label={t.agent} title={t.agent} onClick={() => widget.set('isAgentSelectionOpen', true)}>
-              <FaceSmile />
+            <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('isWorkspaceSelectionOpen', true)}>
+            <IconButton aria-label={t.workspace} title={t.workspace} onClick={() => widget.set('panel', 'workspace')}>
               <Workspace />
             </IconButton>
           )}
@@ -50,13 +52,13 @@ export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded,
             <IconButton
               aria-label={t.knowledgeSource}
               title={t.knowledgeSource}
-              onClick={() => widget.set('isKnowledgeSourceSelectionOpen', true)}
+              onClick={() => widget.set('panel', 'ks')}
             >
               <KnowledgeSource />
             </IconButton>
           )}
           {features.stack && (
-            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('isStackSelectionOpen', true)}>
+            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('panel', 'stack')}>
               <Stack />
             </IconButton>
           )}

package/src/views/MessageInput/index.tsx

@@ -9,15 +9,12 @@ import { ChatEntry } from '../../state/ChatEntry'
 import { ButtonGroup } from './ButtonGroup'
 import { useMessageInputDictionary } from './dictionary'
 import { InfoBar } from './InfoBar'
-import { MessageInputBox } from './styled'
+import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } 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)
@@ -58,7 +55,7 @@ export const MessageInput = ({ features }: Props) => {
           onKeyDown={onKeyDown}
           onIncreaseSize={() => setExpanded(false)}
           onResetSize={() => !expansionLocked.current && setExpanded(true)}
-          maxHeight={isMinimized ? MAX_INPUT_HEIGHT_MINIMIZED : MAX_INPUT_HEIGHT}
+          maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
         />
         <ButtonGroup
           features={features}

package/src/views/MessageInput/styled.ts

@@ -4,6 +4,8 @@ import { styled } from 'styled-components'
 
 const INFO_BAR_HEIGHT = 42
 const INFO_BAR_DISPLACEMENT = 4
+export const MAX_INPUT_HEIGHT = 300
+export const MIN_INPUT_HEIGHT = 24
 
 export const MessageInputBox = styled.div`
   display: flex;
@@ -103,7 +105,7 @@ export const MessageInputBox = styled.div`
     flex-direction: row;
     align-items: center;
     gap: 4px;
-    margin-bottom: 3px;
+    margin-bottom: 1px;
 
     button {
       border: none;
@@ -144,6 +146,12 @@ export const MessageInputBox = styled.div`
           transform: rotate(180deg);
         }
       }
+
+      &.agent img {
+        width: 80%;
+        height: 80%;
+        border-radius: 50%;
+      }
     }
 
     .feature-buttons {
@@ -185,8 +193,8 @@ export const MessageInputBox = styled.div`
     border: none;
     flex: 1;
     padding: 0;
-    height: 30px;
-    padding: 2px 0;
+    height: ${MIN_INPUT_HEIGHT}px;
+    padding: 0;
     transition: height 0.3s;
     background-color: transparent;
     &:focus {

package/src/views/Stacks.tsx

@@ -13,16 +13,16 @@ import { useRightPanel } from '../right-panel/hooks'
 
 export const Stacks = () => {
   const t = useTranslate(dictionary)
-  const isStackSelectionOpen = useWidgetState('isStackSelectionOpen')
+  const panel = useWidgetState('panel')
   const { open } = useRightPanel()
   const widget = useWidget()
 
   useEffect(() => {
-    if (isStackSelectionOpen) open(
+    if (panel === 'stack') open(
       <StacksPanel />,
-      { title: t.title, description: t.description, onClose: () => widget.set('isStackSelectionOpen', false) },
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
     )
-  }, [isStackSelectionOpen, t])
+  }, [panel, t])
 
   return null
 }
@@ -65,7 +65,10 @@ const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
           onChange={setValue}
           renderLabel={s => s.name}
           renderDescription={s => s.use_case}
-          optionClassName={s => (s === value && filter && !s.name.includes(filter)) ? 'filtered-out' : ''}
+          optionClassName={s => (s === value && filter && !s.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+            ? 'filtered-out'
+            : ''
+          }
           className="option-list"
         />}
         {!!stacks.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}

package/src/views/Workspaces.tsx

@@ -13,16 +13,16 @@ import { useRightPanel } from '../right-panel/hooks'
 
 export const Workspaces = () => {
   const t = useTranslate(dictionary)
-  const isWorkspaceSelectionOpen = useWidgetState('isWorkspaceSelectionOpen')
+  const panel = useWidgetState('panel')
   const { open } = useRightPanel()
   const widget = useWidget()
 
   useEffect(() => {
-    if (isWorkspaceSelectionOpen) open(
+    if (panel === 'workspace') open(
       <RightPanelForm><WorkspacesPanel /></RightPanelForm>,
-      { title: t.title, description: t.description, onClose: () => widget.set('isWorkspaceSelectionOpen', false) },
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
     )
-  }, [isWorkspaceSelectionOpen, t])
+  }, [panel, t])
 
   return null
 }
@@ -55,7 +55,10 @@ const WorkspacesPanel = () => {
           onChange={setValue}
           renderLabel={w => w.name}
           renderDescription={w => w.description}
-          optionClassName={w => (w === value && filter && !w.name.includes(filter)) ? 'filtered-out' : ''}
+          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} />}