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

package/dist/views/Workspaces.js

@@ -12,13 +12,13 @@ import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks.js';
 import { useRightPanel } from '../right-panel/hooks.js';
 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(_jsx(RightPanelForm, { children: _jsx(WorkspacesPanel, {}) }), { title: t.title, description: t.description, onClose: () => widget.set('isWorkspaceSelectionOpen', false) });
-    }, [isWorkspaceSelectionOpen, t]);
+        if (panel === 'workspace')
+            open(_jsx(RightPanelForm, { children: _jsx(WorkspacesPanel, {}) }), { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) });
+    }, [panel, t]);
     return null;
 };
 const WorkspacesPanel = () => {
@@ -34,7 +34,9 @@ const WorkspacesPanel = () => {
             chat.set('workspace', { id: value.id, label: value.name });
         close();
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "content", children: [_jsx(IconInput, { icon: _jsx(Search, {}), value: filter, onChange: setFilter, className: "search" }), !!filtered.length && _jsx(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 && _jsx(Placeholder, { title: t.noSearchResults, description: t.noSearchResultsDescription }), !workspaces.length && _jsx(Placeholder, { title: t.noData, description: t.noDataDescription })] }), _jsx(Button, { onClick: submit, disabled: !value, children: t.apply })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "content", children: [_jsx(IconInput, { icon: _jsx(Search, {}), value: filter, onChange: setFilter, className: "search" }), !!filtered.length && _jsx(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 && _jsx(Placeholder, { title: t.noSearchResults, description: t.noSearchResultsDescription }), !workspaces.length && _jsx(Placeholder, { title: t.noData, description: t.noDataDescription })] }), _jsx(Button, { onClick: submit, disabled: !value, children: t.apply })] }));
 };
 const dictionary = {
     en: {

package/dist/views/Workspaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"Workspaces.js","sourceRoot":"","sources":["../../src/views/Workspaces.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Workspaces.js","sourceRoot":"","sources":["../../src/views/Workspaces.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
     "@citric/icons": "^5.4.0 || ^6.0.0",
     "@citric/ui": "^5.4.0 || ^6.0.0",
     "@stack-spot/portal-components": "^2.6.1",
-    "@stack-spot/portal-network": "^0.40.0",
+    "@stack-spot/portal-network": "^0.41.0",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",
     "lodash": "^4.17.0",

package/src/StackspotAIWidget.tsx

@@ -10,10 +10,12 @@ import { RightPanel } from './right-panel/RightPanel'
 import { RightPanelProvider } from './right-panel/RightPanelProvider'
 import { MessageInterceptor } from './state/ChatState'
 import { MinimizedActions } from './types'
+import { Agents } from './views/Agents'
 import { Chat } from './views/Chat'
 import { ChatTabSelection } from './views/ChatTabSelection'
 import { Home } from './views/Home'
 import { KnowledgeSources } from './views/KnowledgeSources'
+import { KSDocument } from './views/KSDocument'
 import { MessageInput } from './views/MessageInput'
 import { MinimizedHeader } from './views/MinimizedHeader'
 import { Stacks } from './views/Stacks'
@@ -57,6 +59,8 @@ export const StackspotAIWidget = (
           <Stacks />
           <Workspaces />
           <KnowledgeSources />
+          <KSDocument />
+          <Agents />
           {!isMinimized && <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>}
         </div>
       </RightPanelProvider>

package/src/chat-interceptors/send-message.ts

@@ -1,5 +1,5 @@
 import { aiClient, StackspotAPIError } from '@stack-spot/portal-network'
-import { ChatEntry } from '../state/ChatEntry'
+import { ChatEntry, KnowledgeSource } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
 import { buildConversationContext } from '../utils/chat'
 
@@ -15,13 +15,25 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState)
   const stream = aiClient.sendChatMessage({ context, user_prompt: content })
   const botEntry = ChatEntry.createStreamedBotEntry(() => stream.cancel())
   chat.pushMessage(botEntry)
-  stream.onChange(value => botEntry.setValue({
-    agent: 'bot',
-    type: 'md',
-    content: value.answer ?? '',
-    messageId: value.message_id ?? undefined,
-    updated: new Date().toISOString(),
-  }))
+  let knowledgeSources: KnowledgeSource[] | undefined 
+  stream.onChange(value => {
+    if (value.sources?.length !== knowledgeSources?.length) {
+      knowledgeSources = value.sources?.filter(s => s.type === 'knowledge_source').map(ks => ({
+        documentId: ks.document_id,
+        documentScore: ks.document_score,
+        name: ks.name,
+        slug: ks.slug,
+      }))
+    }
+    botEntry.setValue({
+      agent: 'bot',
+      type: 'md',
+      content: value.answer ?? '',
+      messageId: value.message_id ?? undefined,
+      knowledgeSources,
+      updated: new Date().toISOString(),
+    })
+  })
   try {
     await stream.getValue()
   } catch (error: any) {

package/src/components/RightPanelTabs.tsx

@@ -15,6 +15,7 @@ interface Props {
 const StyledTabs = styled(Tabs)`
   > button {
     flex: 1;
+    padding: 8px 0;
   }
 `
 

package/src/components/form/styled.ts

@@ -9,7 +9,7 @@ export const RadioCheckBox = styled.ul`
   flex-direction: column;
   gap: 6px;
 
-  li {
+  > li {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -26,6 +26,7 @@ export const RadioCheckBox = styled.ul`
     input[type="radio"], input[type="checkbox"] {
       border-color: ${theme.color.light[700]};
       background-color: transparent;
+      flex-shrink: 0;
     }
 
     input[type="checkbox"]:checked {

package/src/context/hooks.ts

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { useContext, useEffect, useMemo, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { ChatEntry } from '../state/ChatEntry'
 import { ChatProperties, ChatState, MessageInterceptor } from '../state/ChatState'
 import { ObservableState } from '../state/ObservableState'
@@ -78,9 +78,6 @@ export function useCurrentChatMessages(): ChatEntry[] {
 }
 
 export function useChatEntry(entry: ChatEntry) {
-  const immutable = useMemo(() => entry.hasFinished(), [])
-  // the following condition is not a problem for react hooks, it will always be true or always false.
-  if (immutable) return entry.getValue()
   const [content, setContent] = useState(entry.getValue())
   useEffect(() => entry.onChange(setContent), [])
   return content

package/src/features.ts

@@ -15,4 +15,5 @@ export const defaultFeatures: AIWidgetFeatures = {
   stack: true,
   workspace: true,
   knowledgeSource: true,
+  agent: true,
 }

package/src/right-panel/DefaultPanel.tsx

@@ -6,8 +6,8 @@ import { styled } from 'styled-components'
 import { WithChildren } from '../types'
 
 interface Props extends WithChildren {
-  title: string,
-  description: string,
+  title: React.ReactNode,
+  description: React.ReactNode,
   onClose: () => void,
 }
 
@@ -22,6 +22,7 @@ const PanelBox = styled.div`
   header {
     display: flex;
     flex-direction: row;
+    gap: 10px;
 
     .title {
       display: flex;
@@ -45,8 +46,8 @@ export const DefaultPanel = ({ description, onClose, title, children }: Props) =
     <PanelBox>
       <header>
         <div className="title">
-          <Text appearance="h5">{title}</Text>
-          <Text colorScheme="light.700">{description}</Text>
+          {typeof title === 'string' ? <Text appearance="h5">{title}</Text> : title}
+          {typeof description === 'string' ? <Text colorScheme="light.700">{description}</Text> : description}
         </div>
         <IconButton title={t.close} aria-label={t.close} onClick={onClose}>
           <Times />

package/src/right-panel/hooks.tsx

@@ -3,8 +3,8 @@ import { DefaultPanel } from './DefaultPanel'
 import { RightPanelContext } from './RightPanelProvider'
 
 interface RightPanelOptions {
-  title: string,
-  description: string,
+  title: React.ReactNode,
+  description: React.ReactNode,
   onClose?: () => void,
 }
 

package/src/state/ChatEntry.ts

@@ -16,6 +16,13 @@ export interface ChatAction extends SerializableAction {
   appearance?: 'primary' | 'secondary',
 }
 
+export interface KnowledgeSource {
+  name: string,
+  slug: string,
+  documentScore: number,
+  documentId: string,
+}
+
 export interface TextChatEntry {
   type: 'text' | 'md',
   agent: 'bot' | 'user' | 'system',
@@ -23,7 +30,7 @@ export interface TextChatEntry {
   actions?: ChatAction[],
   subtitle?: string,
   content: string,
-  // knowledgeSources?: KnowledgeSource[],
+  knowledgeSources?: KnowledgeSource[],
   updated?: string,
   agentId?: string,
   messageId?: string,
@@ -68,7 +75,6 @@ export class ChatEntry {
   }
 
   setValue(value: TextChatEntry) {
-    if (this.streamFinished) return
     this.value = value
     this.listeners.forEach(l => l(this.value))
   }
@@ -79,7 +85,6 @@ export class ChatEntry {
 
   finish() {
     this.streamFinished = true
-    this.listeners = []
   }
 
   hasFinished() {

package/src/state/ChatState.ts

@@ -7,9 +7,13 @@ interface Labeled {
   label: string,
 }
 
+interface LabeledWithImage extends Labeled {
+  image?: string,
+}
+
 export interface ChatProperties {
   label: string,
-  agent?: Labeled,
+  agent?: LabeledWithImage,
   workspace?: Labeled,
   stack?: Labeled,
   knowledgeSources?: Labeled[],

package/src/state/WidgetState.ts

@@ -2,41 +2,29 @@ import { ChatTabsController } from './ChatTabsController'
 import { ObservableState } from './ObservableState'
 
 export interface WidgetProperties {
-  isStackSelectionOpen?: boolean,
-  isWorkspaceSelectionOpen?: boolean,
-  isAgentSelectionOpen?: boolean,
-  isKnowledgeSourceSelectionOpen?: boolean,
-  isCodeEditorOpen?: boolean,
-  isChatHistoryOpen?: boolean,
+  /**
+   * Current content of the right panel. Undefined for closed right panel.
+   */
+  panel?: 'stack' | 'workspace' | 'agent' | 'ks' | 'editor' | 'history' | 'ks-details',
+  /**
+   * KS to use when the right panel "ks-details" is open.
+   */
+  currentKSInPanel?: { name: string, slug: string, score: number, documentId: string },
+  /**
+   * Whether or not the widget is in its minimized version.
+   */
   isMinimized?: boolean,
+  /**
+   * The current code in the editor.
+   */
   code?: string,
 }
 
-const panelKeys: (keyof WidgetProperties)[] = [
-  'isAgentSelectionOpen', 'isChatHistoryOpen', 'isCodeEditorOpen', 'isKnowledgeSourceSelectionOpen', 'isStackSelectionOpen',
-  'isWorkspaceSelectionOpen',
-]
-
 export class WidgetState extends ObservableState<WidgetProperties> {
   readonly chatTabs: ChatTabsController
 
   constructor(initial: WidgetProperties = {}, chatTabs?: ChatTabsController) {
     super(initial)
     this.chatTabs = chatTabs ?? new ChatTabsController()
-    this.createCloseOthersBehavior()
-  }
-
-  private createCloseOthersBehavior() {
-    panelKeys.forEach((key) => {
-      this.onChange(key, (value) => {
-        if (value) this.closeOtherPanels(key)
-      })
-    })
-  }
-
-  private closeOtherPanels(leaveOpen: keyof WidgetProperties) {
-    panelKeys.forEach((key) => {
-      if (key !== leaveOpen) this.set(key, false)
-    })
   }
 }

package/src/utils/chat.ts

@@ -21,7 +21,7 @@ export function buildConversationContext(state: ChatState): FixedChatRequest['co
     language: getLanguage(),
     knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
     agent_id: state.get('agent')?.id,
-    agent_built_in: !!state.get('agent'),
+    agent_built_in: !state.get('agent'),
     os: navigator.userAgent,
     platform: 'web-widget',
     platform_version: navigator.userAgent,

package/src/utils/knowledge-source.ts

@@ -0,0 +1,43 @@
+import { DocumentResponse } from '@stack-spot/portal-network/api/ai'
+
+function attemptToParseMalFormedJson(str: string) {
+  try {
+    return JSON.parse(str)
+  } catch {
+    try {
+      const fixed = str
+        .replace(/"/g, '-_-')
+        .replace(/'/g, '"')
+        .replace(/-_-/g, "'")
+        .replace(
+          /": (\w+)/g,
+          (_, value) => (['null', 'true', 'false'].includes(value) || value.match(/\d+/)) ? `": ${value}` : `": "${value}"`,
+        )
+      return JSON.parse(fixed)
+    } catch {
+      return undefined
+    }
+  }
+}
+
+export function extractCodeFromKSDocument(document: DocumentResponse): { language?: string, snippet: string, text?: string } {
+  const language = (document?.metadata as any)?.language
+  if (language) {
+    const pageContent: string = document?.page_content ?? ''
+    let text: string | undefined = undefined
+    let snippet = pageContent
+    const match = pageContent.match(/^use case: .*\n/i)
+    if (match) {
+      text = match[0]
+      snippet = pageContent.replace(text, '')
+    }
+    return { language, snippet, text }
+  }
+
+  if (document?.page_content) {
+    const parsed = attemptToParseMalFormedJson(document.page_content)
+    return parsed ? { language: 'json', snippet: JSON.stringify(parsed, null, 2) } : { snippet: document.page_content }
+  }
+
+  return typeof document === 'object' ? { language: 'json', snippet: JSON.stringify(document, null, 2) } : { snippet: String(document) }
+}

package/src/views/Agents.tsx

@@ -1 +1,186 @@
-export const Agents = () => null
+import { Button, Text } from '@citric/core'
+import { Search } from '@citric/icons'
+import { Badge } from '@citric/ui'
+import { Placeholder } from '@stack-spot/portal-components/Placeholder'
+import { agentClient } from '@stack-spot/portal-network'
+import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/agent'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo, useState } from 'react'
+import { styled } from 'styled-components'
+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'
+
+const AgentLabel = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+
+  img {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+`
+
+const AgentDescription = styled.div`
+  color: ${theme.color.light[700]};
+  line-height: 18px;
+
+  section {
+    border-bottom: 1px solid ${theme.color.light[600]};
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    .title {
+      display: block;
+      margin-bottom: 6px;
+    }
+  }
+  
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    gap: 6px;
+
+    li {
+      margin: 3px 0;
+    }
+  }
+`
+
+export const Agents = () => {
+  const t = useTranslate(dictionary)
+  const panel = useWidgetState('panel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'agent') open(
+      <AgentsPanel />,
+      { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
+    )
+  }, [panel, t])
+
+  return null
+}
+
+const AgentsPanel = () => {
+  const t = useTranslate(dictionary)
+  
+  return <RightPanelTabs tabs={[
+    { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" /> },
+    { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" /> },
+    { title: t.shared, content: <AgentsTab key="shared" visibility="SHARED" /> },
+    { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" /> },
+  ]} />
+}
+
+const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' }) => {
+  const t = useTranslate(dictionary)
+  const { close } = useRightPanel()
+  const chat = useCurrentChat()
+  const [filter, setFilter] = useState('')
+  const agents = visibility === 'BUILT-IN' ? agentClient.publicAgents.useQuery({}) : agentClient.agents.useQuery({ visibility })
+  const [value, setValue] = useState<AgentResponse | undefined>(agents.find(a => a.id === chat.get('agent')?.id))
+  const filtered = useMemo(
+    () => filter ? agents.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : agents,
+    [agents, filter, value],
+  )
+
+  function submit() {
+    if (value) chat.set('agent', { id: value.id, label: value.name, image: value.avatar })
+    close()
+  }
+
+  return (
+    <>
+      <div className="content">
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+        {!!filtered.length && <DescribedRadioGroup
+          options={filtered}
+          keygen={a => a.id}
+          value={value}
+          onChange={setValue}
+          renderLabel={({ name, avatar }) => (
+            <AgentLabel>
+              {avatar && <img src={avatar} />}
+              <Text>{name}</Text>
+            </AgentLabel>
+          )}
+          renderDescription={({ description, llm_config: llmc, knowledge_sources_config: ksc }) => (
+            <AgentDescription>
+              {description && <section>
+                <Text appearance="microtext1" className="title">Description</Text>
+                <Text>{description}</Text>
+              </section>}
+              {!!ksc?.knowledge_sources?.length && <section>
+                <Text appearance="microtext1" className="title">Knowledge sources</Text>
+                <ul>
+                  {ksc.knowledge_sources.map((ks, index) => <li key={index}><Badge palette="teal" appearance="square">{ks}</Badge></li>)}
+                </ul>
+              </section>}
+              {llmc?.model_slug && <section>
+                <Text appearance="microtext1" className="title">LLM</Text>
+                <Badge palette="orange" appearance="square">{llmc.model_slug}</Badge>
+              </section>}
+            </AgentDescription>
+          )}
+          optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+            ? 'filtered-out'
+            : ''
+          }
+          className="option-list"
+        />}
+        {!!agents.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
+        {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+      </div>
+      <Button onClick={submit} disabled={!value}>{t.apply}</Button>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Agents',
+    description: 'By selecting an Agent, it will be consulted to generate the answers.',
+    personal: 'Personal',
+    builtin: 'Built-in',
+    shared: 'Shared',
+    account: 'Account',
+    apply: 'Apply',
+    noSearchResults: "Your search didn't yield results.",
+    noSearchResultsDescription: 'Please, try another search term.',
+    noData: 'There are no agents in this category yet.',
+    noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
+  },
+  pt: {
+    title: 'Agentes',
+    description: 'Ao selecionar um Agente, ele será consultado para gerar as respostas.',
+    personal: 'Pessoal',
+    builtin: 'Embutido',
+    shared: 'Compartilhado',
+    account: 'Conta',
+    apply: 'Aplicar',
+    noSearchResults: 'Sua busca não produziu resultados.',
+    noSearchResultsDescription: 'Por favor, tente outra busca.',
+    noData: 'Ainda não há agentes nesta categoria.',
+    noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
+  },
+} satisfies Dictionary

package/src/views/Chat/ChatMessage.tsx

@@ -1,13 +1,13 @@
-import { IconBox, Text } from '@citric/core'
+import { Button, IconBox, Text } from '@citric/core'
 import { Dislike, DislikeFill, Like, LikeFill, TimesCircle } from '@citric/icons'
 import { Avatar, IconButton } from '@citric/ui'
 import { aiClient } from '@stack-spot/portal-network'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry } from '../../context/hooks'
+import { useChatEntry, useWidget } from '../../context/hooks'
 import { useChatScrollToBottomEffect } from '../../hooks/chat-scroll'
-import { ChatEntry } from '../../state/ChatEntry'
+import { ChatEntry, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
 import { AgentInfo } from './AgentInfo'
 
@@ -20,8 +20,14 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
   const date = new Date(entry.updated ?? '')
   const shouldShowDate = entry.updated && !isNaN(date.getTime())
   const ref = useRef<HTMLLIElement>(null)
+  const widget = useWidget()
   useChatScrollToBottomEffect(ref, [entry])
 
+  const detailKS = useCallback(({ name, slug, documentScore, documentId }: Required<TextChatEntry>['knowledgeSources'][number]) => {
+    widget.set('currentKSInPanel', { name, slug, score: documentScore, documentId })
+    widget.set('panel', 'ks-details')
+  }, [])
+
   const { like, dislike } = useMemo(() => {
     async function feedback(like: boolean) {
       if (!entry.messageId || like === liked) return
@@ -62,6 +68,14 @@ export const ChatMessage = ({ message, username }: { message: ChatEntry, usernam
           <Text appearance="microtext1">{entry.error}</Text>
         </div>
       )}
+      {!!entry.knowledgeSources?.length && <div className="ks-box">
+        <Text appearance="microtext1" colorScheme="light.700">Knowledge Sources:</Text>
+        <ul>{entry.knowledgeSources.map(ks => (
+          <li key={ks.slug}>
+            <Button size="sm" colorScheme="light" onClick={() => detailKS(ks)}>{ks.name}</Button>
+          </li>
+        ))}</ul>
+      </div>}
       <div className="message-footer">
         {entry.agent === 'bot' && entry.messageId && !entry.error && <div className="message-actions">
           <IconButton title={t.like} aria-label={t.like} onClick={like}>

package/src/views/Chat/styled.ts

@@ -113,4 +113,28 @@ export const ChatList = styled.ul`
   .plain-text {
     margin: 0
   }
+
+  .ks-box {
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 8px;
+    border: 1px solid ${theme.color.light[500]};
+
+    > ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      gap: 6px;
+
+      > li button {
+        margin: 0;
+      }
+    }
+  }
 `