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

package/src/components/Tooltip/Tooltip.tsx

@@ -8,21 +8,27 @@ import { TooltipPosition } from './types'
 interface Props extends WithChildren, WithStyle {
   content: React.ReactNode,
   position?: TooltipPosition,
+  triggeredBy?: 'click' | 'hover',
   custom?: boolean,
 }
 
-export const Tooltip = ({ content, custom, position = 'bottom', children, className, style }: Props) => {
+export const Tooltip = ({ content, custom, position, triggeredBy = 'hover', children, className, style }: Props) => {
   const api = useTooltip()
+
+  function show(e: React.MouseEvent<HTMLDivElement, MouseEvent>, hideOnClickOutside?: boolean) {
+    api.show({
+      content: custom ? content : <DefaultTooltip><Text appearance="microtext1">{content}</Text></DefaultTooltip>,
+      anchor: e.target as HTMLElement,
+      position,
+      hideOnClickOutside,
+    })
+  }
   return (
     <div
-      onMouseEnter={e => api.show(
-        custom ? content : <DefaultTooltip><Text appearance="microtext1">{content}</Text></DefaultTooltip>,
-        e.target as HTMLElement,
-        position,
-      )}
-      onMouseLeave={() => api.hide()}
+      {...(triggeredBy === 'hover' ? { onMouseEnter: show, onMouseLeave: () => api.hide() } : { onClick: (e) => show(e, true) })}
       className={className}
       style={style}
+      tabIndex={triggeredBy === 'click' ? 0 : undefined}
     >
       {children}
     </div>

package/src/components/Tooltip/TooltipAPI.ts

@@ -1,20 +1,23 @@
 import { animationTimeMS } from './style'
-import { TooltipPosition } from './types'
+import { ShowOptions } from './types'
 
+const MARGIN_TO_CORNERS_PX = 10
 
 export class TooltipAPI {
   private tooltipRef: React.RefObject<HTMLDivElement>
   private setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>
   private hideTimeoutId: number | undefined
+  private clickListener: ((e: MouseEvent) => void) | undefined
 
   constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>) {
     this.tooltipRef = tooltipRef
     this.setContent = setContent
   }
 
-  show(content: React.ReactNode, anchor: HTMLElement, position: TooltipPosition): void {
+  show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions): void {
     window.clearTimeout(this.hideTimeoutId)
     this.hideTimeoutId = undefined
+    if (this.clickListener) document.removeEventListener('click', this.clickListener)
     this.setContent(content)
     setTimeout(() => {
       if (!this.tooltipRef.current) return
@@ -33,8 +36,24 @@ export class TooltipAPI {
         if (position === 'top') top = rect.top - tooltipHeight
         else top = rect.top + rect.height
       }
+      // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
+      if (top <= 0) top += MARGIN_TO_CORNERS_PX
+      else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
+        top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight
+      }
+      if (left <= 0) left += MARGIN_TO_CORNERS_PX
+      else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
+        left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth
+      }
       this.tooltipRef.current.style.top = `${top}px`
       this.tooltipRef.current.style.left = `${left}px`
+      if (hideOnClickOutside) {
+        this.clickListener = (e: MouseEvent) => {
+          if (this.tooltipRef.current?.contains(e.target as HTMLElement)) return
+          this.hide()
+        }
+        document.addEventListener('click', this.clickListener)
+      }
     }, 10)
   }
 
@@ -42,5 +61,6 @@ export class TooltipAPI {
     if (!this.tooltipRef.current) return
     this.tooltipRef.current.classList.remove('visible')
     this.hideTimeoutId = window.setTimeout(() => this.setContent(undefined), animationTimeMS)
+    if (this.clickListener) document.removeEventListener('click', this.clickListener)
   }
 }

package/src/components/Tooltip/style.tsx

@@ -5,7 +5,6 @@ export const animationTimeMS = 300
 
 export const TooltipBox = styled.div`
   position: absolute;
-  pointer-events: none;
   opacity: 0;
   transition: opacity ${animationTimeMS/ 1000}s;
   top: 0;

package/src/components/Tooltip/types.ts

@@ -6,3 +6,10 @@ export interface BoxPosition {
   y1: number,
   y2: number,
 }
+
+export interface ShowOptions {
+  content: React.ReactNode,
+  anchor: HTMLElement,
+  position?: TooltipPosition,
+  hideOnClickOutside?: boolean,
+}

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,6 @@ export const defaultFeatures: AIWidgetFeatures = {
   stack: true,
   workspace: true,
   knowledgeSource: true,
+  agent: true,
+  chatHistory: 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/types.ts

@@ -10,7 +10,7 @@ export interface ButtonAction extends WithStyle {
   icon?: React.ReactElement,
   color?: string,
   label: string,
-  onClick: () => void,
+  onClick: () => any,
 }
 
 export interface MinimizedActions {

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/date.ts

@@ -28,6 +28,10 @@ export function useDateFormatter() {
   }
 }
 
+export function subtractDays(date: Date, numberOfDays: number) {
+  return new Date(date.getTime() - 24 * numberOfDays * 60 * 60000)
+}
+
 const dictionary = {
   en: {
     today: 'Today',

package/src/utils/download.ts

@@ -0,0 +1,12 @@
+export function download(filename: string, text: string) {
+  const element = document.createElement('a')
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+  element.setAttribute('download', filename)
+
+  element.style.display = 'none'
+  document.body.appendChild(element)
+
+  element.click()
+
+  document.body.removeChild(element)
+}

package/src/utils/knowledge-source.ts

@@ -0,0 +1,55 @@
+import { DocumentResponse, SourceKnowledgeSource4, SourceProjectFile4, SourceStackAi } from '@stack-spot/portal-network/api/ai'
+import { KnowledgeSource } from '../state/ChatEntry'
+
+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) }
+}
+
+export function genericSourcesToKnowledgeSources(
+  sources: (SourceStackAi | SourceKnowledgeSource4 | SourceProjectFile4)[] | undefined,
+): KnowledgeSource[] | undefined {
+  return sources?.filter(s => s.type === 'knowledge_source').map(ks => ({
+    documentId: ks.document_id,
+    documentScore: ks.document_score,
+    name: ks.name,
+    slug: ks.slug,
+  }))
+}

package/src/views/Agents.tsx

@@ -1 +1,187 @@
-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)
+  const chat = useCurrentChat()
+  
+  return <RightPanelTabs key={chat.id} 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,15 +1,15 @@
-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 { useChatScrollToBottomEffect } from '../../hooks/chat-scroll'
-import { ChatEntry } from '../../state/ChatEntry'
+import { useChatEntry, useWidget } from '../../context/hooks'
+import { ChatEntry, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
 import { AgentInfo } from './AgentInfo'
+import { useChatScrollToBottomEffect } from './chat-scroll'
 
 export const ChatMessage = ({ message, username }: { message: ChatEntry, username: string }) => {
   const t = useTranslate(dictionary)
@@ -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/{hooks → views/Chat}/chat-scroll.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
 /**
  * Scrolls the closest chat (upwards in the tree) to its bottom.
@@ -6,9 +6,12 @@ import { useEffect } from 'react'
  * @param deps when the deps changes, the chat is scrolled.
  */
 export function useChatScrollToBottomEffect(ref: React.RefObject<HTMLElement>, deps: any[]) {
+  const prevScrollTop = useRef(0)
+
   useEffect(() => {
     const chat = ref.current?.closest('.chat-content')
-    if (!chat) return
-    chat.scrollTop = chat.scrollHeight
+    if (!chat || chat.scrollTop < prevScrollTop.current) return
+    chat.scrollTop = chat.scrollHeight - chat.clientHeight
+    prevScrollTop.current = chat.scrollTop
   }, deps)
 }