@stack-spot/ai-chat-widget 0.1.0

package/src/state/WidgetState.ts

@@ -0,0 +1,42 @@
+import { ChatTabsController } from './ChatTabsController'
+import { ObservableState } from './ObservableState'
+
+export interface WidgetProperties {
+  isStackSelectionOpen?: boolean,
+  isWorkspaceSelectionOpen?: boolean,
+  isAgentSelectionOpen?: boolean,
+  isKnowledgeSourceSelectionOpen?: boolean,
+  isCodeEditorOpen?: boolean,
+  isChatHistoryOpen?: boolean,
+  isMinimized?: boolean,
+  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

@@ -0,0 +1,20 @@
+import { WithStyle } from '@stack-spot/portal-theme'
+
+export interface WithChildren<T = React.ReactNode> {
+  children?: T,
+}
+
+export type PropsOf<T extends React.FunctionComponent> = T extends React.FunctionComponent<infer P> ? P : never
+
+export interface ButtonAction extends WithStyle {
+  icon?: React.ReactElement,
+  color?: string,
+  label: string,
+  onClick: () => void,
+}
+
+export interface MinimizedActions {
+  onCollapse?: () => void,
+  onExpand?: () => void,
+  onClose?: () => void,
+}

package/src/utils/chat.ts

@@ -0,0 +1,30 @@
+import { FixedChatRequest } from '@stack-spot/portal-network'
+import { getLanguage } from '@stack-spot/portal-translate'
+import { ulid } from 'ulid'
+import { ChatState, MessageInterceptor } from '../state/ChatState'
+import { WidgetState } from '../state/WidgetState'
+
+let next = 1
+
+export function createNewChat(widget: WidgetState, interceptors: MessageInterceptor[]) {
+  const id = ulid()
+  widget.chatTabs.add(new ChatState({ id, initial: { label: `Chat ${next}` }, interceptors }))
+  widget.chatTabs.select(id)
+  next++
+}
+
+export function buildConversationContext(state: ChatState): FixedChatRequest['context'] {
+  return {
+    workspace: state.get('workspace')?.id,
+    conversation_id: state.id,
+    stack_id: state.get('stack')?.id,
+    language: getLanguage(),
+    knowledge_sources: state.get('knowledgeSources')?.map(ks => ks.id),
+    agent_id: state.get('agent')?.id,
+    agent_built_in: !!state.get('agent'),
+    os: navigator.userAgent,
+    platform: 'web-widget',
+    platform_version: navigator.userAgent,
+    stackspot_ai_version: 'alpha',
+  }
+}

package/src/utils/date.ts

@@ -0,0 +1,40 @@
+import { Dictionary, Language, getLanguage, useLanguage } from '@stack-spot/portal-translate'
+
+const OneDay = 24 * 60 * 60 * 1000
+const timeFormatOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute:'2-digit' }
+const fullFormatOptions: Intl.DateTimeFormatOptions = {
+  ...timeFormatOptions,
+  day: '2-digit',
+  month: 'long',
+}
+
+
+export function formatDateForChatMessage(date: Date, language: Language = getLanguage()) {
+  const formatted: string[] = []
+  const now = new Date()
+  const isToday = date.toDateString() === now.toDateString()
+  const isYesterday = now.getTime() - date.getTime() < OneDay
+  if (isToday) formatted.push(dictionary[language].today)
+  else if (isYesterday) formatted.push(dictionary[language].yesterday)
+  const options = isToday || isYesterday ? timeFormatOptions : fullFormatOptions
+  formatted.push(date.toLocaleString([], options))
+  return formatted.join(', ')
+}
+
+export function useDateFormatter() {
+  const language = useLanguage()
+  return {
+    formatForChatMessage: (date: Date) => formatDateForChatMessage(date, language),
+  }
+}
+
+const dictionary = {
+  en: {
+    today: 'Today',
+    yesterday: 'Yesterday',
+  },
+  pt: {
+    today: 'Hoje',
+    yesterday: 'Ontem',
+  },
+} satisfies Dictionary

package/src/views/Agents.tsx

@@ -0,0 +1 @@
+export const Agents = () => null

package/src/views/Chat/AgentInfo.tsx

@@ -0,0 +1,17 @@
+import { Text } from '@citric/core'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+
+interface Props {
+  agentId?: string,
+}
+
+// todo: retrieve agent data and render accordingly
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const AgentInfo = ({ agentId: _agentId }: Props) => (
+  <>
+    <div className="agent-image-wrapper">
+      <MiniLogo className="agent-image" />
+    </div>
+    <Text appearance="body2">Stackspot AI</Text>
+  </>
+)

package/src/views/Chat/ChatMessage.tsx

@@ -0,0 +1,89 @@
+import { 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 { Markdown } from '../../components/Markdown'
+import { useChatEntry } from '../../context/hooks'
+import { useChatScrollToBottomEffect } from '../../hooks/chat-scroll'
+import { ChatEntry } from '../../state/ChatEntry'
+import { useDateFormatter } from '../../utils/date'
+import { AgentInfo } from './AgentInfo'
+
+export const ChatMessage = ({ message, username }: { message: ChatEntry, username: string }) => {
+  const t = useTranslate(dictionary)
+  const [liked, setLiked] = useState<boolean | undefined>()
+  const entry = useChatEntry(message)
+  const dateFormatter = useDateFormatter()
+  const userInfo = entry.agent === 'user' ? <Avatar size="xs">{username}</Avatar> : <AgentInfo agentId={entry.agentId} />
+  const date = new Date(entry.updated ?? '')
+  const shouldShowDate = entry.updated && !isNaN(date.getTime())
+  const ref = useRef<HTMLLIElement>(null)
+  useChatScrollToBottomEffect(ref, [entry])
+
+  const { like, dislike } = useMemo(() => {
+    async function feedback(like: boolean) {
+      if (!entry.messageId || like === liked) return
+      setLiked(like)
+      try {
+        await aiClient.createEvent.mutate({
+          body: [{
+            feedback: like ? 'LIKE' : 'DISLIKE',
+            message_id: entry.messageId,
+            type: 'user_feedback_provided',
+            code: '',
+            generated_at: Math.floor(new Date().getTime() / 1000),
+            size: 0,
+          }],
+        })
+      } catch {
+        setLiked(liked)
+      }
+    }
+
+    return {
+      like: () => feedback(true),
+      dislike: () => feedback(false),
+    }
+  }, [entry.messageId, liked])
+  
+  return (entry.content || entry.error) && (
+    <li className={entry.agent} ref={ref}>
+      <div className="chat-message">
+        <div className="user-info">{userInfo}</div>
+        {entry.content && <div className="message-content">
+          {entry.type === 'md' ? <Markdown>{entry.content}</Markdown> : <p className="plain-text">{entry.content}</p>}
+        </div>}
+      </div>
+      {entry.error && (
+        <div className="error">
+          <IconBox size="xs"><TimesCircle /></IconBox>
+          <Text appearance="microtext1">{entry.error}</Text>
+        </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}>
+            {liked === true ? <LikeFill /> : <Like />}
+          </IconButton>
+          <IconButton title={t.dislike} aria-label={t.dislike} onClick={dislike}>
+            {liked === false ? <DislikeFill /> : <Dislike />}
+          </IconButton>
+        </div>}
+        {shouldShowDate && <Text appearance="microtext1" className="chat-date">{dateFormatter.formatForChatMessage(date)}</Text>}
+      </div>
+    </li>
+  )
+}
+
+const dictionary = {
+  en: {
+    like: 'Like',
+    dislike: 'Dislike',
+  },
+  pt: {
+    like: 'Gostei',
+    dislike: 'Não gostei',
+  },
+} satisfies Dictionary

package/src/views/Chat/ChatMessages.tsx

@@ -0,0 +1,16 @@
+import { useMemo, useRef } from 'react'
+import { useChatMessages } from '../../context/hooks'
+import { ChatMessage } from './ChatMessage'
+import { ChatList } from './styled'
+
+interface Props {
+  username: string,
+  chatId: string,
+}
+
+export const ChatMessages = ({ chatId, username }: Props) => {
+  const messages = useChatMessages(chatId)
+  const items = useMemo(() => messages.map(m => <ChatMessage key={m.id} message={m} username={username} />), [messages])
+  const ref = useRef<HTMLUListElement>(null)
+  return <ChatList ref={ref}>{items}</ChatList>
+}

package/src/views/Chat/index.tsx

@@ -0,0 +1,11 @@
+import { useChatTabs } from '../../context/hooks'
+import { ChatMessages } from './ChatMessages'
+
+interface Props {
+  username: string,
+}
+
+export const Chat = ({ username }: Props) => {
+  const { active } = useChatTabs()
+  return <ChatMessages key={active} chatId={active} username={username} />
+}

package/src/views/Chat/styled.ts

@@ -0,0 +1,116 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const ChatList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  gap: 20px;
+  margin: 0 5px;
+  padding: 0;
+  flex: 1;
+
+  .error {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    padding: 8px 10px;
+    background-color: ${theme.color.danger[500]};
+    color: ${theme.color.danger.contrastText};
+    border-radius: 8px;
+    align-self: start;
+
+    svg {
+      fill: ${theme.color.danger.contrastText};
+    }
+
+    small {
+      margin-top: 1px;
+    }
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  .chat-message {
+    p, li {
+      line-height: 24px;
+    }
+
+    a[href] {
+      color: inherit;
+    }
+
+    .highlighter {
+      background-color: ${theme.color.gray[800]} !important;
+    }
+  }
+
+  .message-footer {
+    display: flex;
+    flex-direction: row;
+
+    .message-actions {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+    }
+
+    .chat-date {
+      opacity: 0.6;
+      margin-left: auto;
+    }
+  }
+
+  > li {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &.bot, &.system {
+      .chat-message {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    
+        .agent-image-wrapper {
+          width: 24px;
+          height: 24px;
+          border-radius: 4px;
+          background-color: ${theme.color.light[300]};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+    
+          .agent-image {
+            width: 18px;
+            height: 18px;
+          }
+        }
+      }
+    }
+
+    &.user {
+      align-items: end;
+
+      .chat-message {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        
+        .message-content {
+          padding: 10px;
+          background-color: ${theme.color.light[500]};
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
+  .plain-text {
+    margin: 0
+  }
+`

package/src/views/ChatTabSelection.tsx

@@ -0,0 +1,65 @@
+import { Clock, Plus } from '@citric/icons'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useMemo } from 'react'
+import { TabManager } from '../components/TabManager'
+import { useChatState, useChatTabs, useWidget } from '../context/hooks'
+import { MessageInterceptor } from '../state/ChatState'
+import { ButtonAction } from '../types'
+import { createNewChat } from '../utils/chat'
+
+interface Props {
+  history?: boolean,
+  interceptors: MessageInterceptor[],
+}
+
+const TabLabel = ({ id }: { id: string }) => {
+  const label = useChatState(id, 'label')
+  return <div title={label}>{label}</div>
+}
+
+export const ChatTabSelection = ({ history, interceptors }: Props) => {
+  const t = useTranslate(dictionary)
+  const widget = useWidget()
+  const { active, chats } = useChatTabs()
+
+  const buttons = useMemo<ButtonAction[]>(
+    () => {
+      const actions: ButtonAction[] = [{
+        icon: <Plus />,
+        label: t.newChat,
+        onClick: () => createNewChat(widget, interceptors),
+      }]
+      if (history) {
+        actions.push({
+          icon: <Clock />,
+          label: t.openHistory,
+          className: 'test',
+          style: { marginLeft: 'auto' },
+          onClick: () => { /* todo */ },
+        })
+      }
+      return actions
+    },
+    [history],
+  )
+  return <TabManager
+    tabs={chats}
+    active={active}
+    renderLabel={({ id }) => <TabLabel id={id} />}
+    keygen={({ id }) => id}
+    onRemove={({ id }) => widget.chatTabs.remove(id)}
+    onSelect={({ id }) => widget.chatTabs.select(id)}
+    buttons={buttons}
+  />
+}
+
+const dictionary = {
+  en: {
+    openHistory: 'Open chat history',
+    newChat: 'New chat',
+  },
+  pt: {
+    openHistory: 'Abrir histórico da conversa',
+    newChat: 'Novo chat',
+  },
+} satisfies Dictionary

package/src/views/Editor.tsx

@@ -0,0 +1 @@
+export const Editor = () => null

package/src/views/Home.tsx

@@ -0,0 +1,109 @@
+import { FaceSmile, KnowledgeSource, QuickCommand } from '@citric/icons'
+import { MiniLogo } from '@stack-spot/portal-components/svg'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { styled } from 'styled-components'
+import { QuickStartButton } from '../components/QuickStartButton'
+import { useCurrentChat } from '../context/hooks'
+import { ChatEntry } from '../state/ChatEntry'
+
+interface Props {
+  username: string,
+}
+
+const HomeBox = styled.div`
+  margin: auto;
+
+  .title, .subtitle {
+    font-family: 'San Francisco';
+    font-size: 26px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .title {
+    display: inline-block;
+    background: linear-gradient(72.81deg, #FF9900 0.96%, #FF6633 100%);
+    background-clip: text;
+    margin-bottom: 10px;
+    color: transparent;
+  }
+
+  .subtitle {
+    color: #A0A0A0;
+    margin-bottom: 20px;
+  }
+
+  .shortcuts {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    li {
+      flex: 1;
+    }
+  }
+`
+
+export const Home = ({ username }: Props) => {
+  const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+
+  function send(message: string) {
+    chat.pushMessage(ChatEntry.createUserEntry(message))
+  }
+
+  return (
+    <HomeBox className="home-page">
+      <h2 className="title">{t.hello}, {username}</h2>
+      <h3 className="subtitle">{t.subtitle}</h3>
+      <div className="shortcuts">
+        <QuickStartButton
+          label={t['question.meta']}
+          onClick={() => send(t['question.meta'])}
+          icon={<MiniLogo />}
+          background={theme.color.orange[50]}
+        />
+        <QuickStartButton
+          label={t['question.ks']}
+          onClick={() => send(t['question.ks'])}
+          icon={<KnowledgeSource />}
+          background={theme.color.cyan[50]}
+          color={theme.color.cyan[600]}
+        />
+        <QuickStartButton
+          label={t['question.agents']}
+          onClick={() => send(t['question.agents'])}
+          icon={<FaceSmile />}
+          background={theme.color.pink[50]}
+          color={theme.color.pink[600]}
+        />
+        <QuickStartButton
+          label={t['question.qc']}
+          onClick={() => send(t['question.qc'])}
+          icon={<QuickCommand />}
+          background={theme.color.purple[50]}
+          color={theme.color.purple[600]}
+        />
+      </div>
+    </HomeBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    hello: 'Hello',
+    subtitle: "Let's innovate and streamline your coding journey together. Want to lead the change? Just ask!",
+    'question.meta': 'What is StackSpot AI?',
+    'question.ks': 'What are Knowledge Sources?',
+    'question.agents': 'How do Agents work?',
+    'question.qc': 'What is a Quick Command?',
+  },
+  pt: {
+    hello: 'Olá',
+    subtitle: 'Vamos inovar e simplificar sua jornada de programação juntos. Quer liderar a mudança? É só perguntar!',
+    'question.meta': 'O que é a StackSpot AI?',
+    'question.ks': 'O que são Knowledge Sources?',
+    'question.agents': 'Como funcionam os agentes?',
+    'question.qc': 'O que é um Quick Command?',
+  },
+} satisfies Dictionary

package/src/views/KnowledgeSources.tsx

@@ -0,0 +1,115 @@
+import { Button } from '@citric/core'
+import { Search } from '@citric/icons'
+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 { 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'
+
+export const KnowledgeSources = () => {
+  const t = useTranslate(dictionary)
+  const isKnowledgeSourceSelectionOpen = useWidgetState('isKnowledgeSourceSelectionOpen')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (isKnowledgeSourceSelectionOpen) open(
+      <KnowledgeSourcesPanel />,
+      { title: t.title, description: t.description, onClose: () => widget.set('isKnowledgeSourceSelectionOpen', false) },
+    )
+  }, [isKnowledgeSourceSelectionOpen, t])
+
+  return null
+}
+
+const KnowledgeSourcesPanel = () => {
+  const t = useTranslate(dictionary)
+  
+  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" /> },
+  ]} />
+}
+
+const KnowledgeSourcesTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
+  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 filtered = useMemo(
+    () => filter
+      ? knowledgeSources.filter(ks => value.includes(ks) || ks.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
+      : knowledgeSources,
+    [knowledgeSources, filter, value],
+  )
+
+  function submit() {
+    if (value) chat.set('knowledgeSources', value.map(({ id, name }) => ({ id, label: name })))
+    close()
+  }
+
+  return (
+    <>
+      <div className="content">
+        <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
+        {!!filtered.length && <DescribedCheckboxGroup
+          options={filtered}
+          keygen={ks => ks.id}
+          value={value}
+          onChange={(value) => {
+            setValue(value)
+            setChanged(true)
+          }}
+          renderLabel={ks => ks.name}
+          renderDescription={ks => ks.description}
+          optionClassName={ks => (filter && !ks.name.includes(filter) && value.includes(ks)) ? 'filtered-out' : ''}
+          className="option-list"
+        />}
+        {!!knowledgeSources.length && !filtered.length && (
+          <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />
+        )}
+        {!knowledgeSources.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
+      </div>
+      <Button onClick={submit} disabled={!hasChanged}>{t.apply}</Button>
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Knowledge Sources',
+    description: 'By selecting one or more knowledge sources, they will be consulted to generate the responses.',
+    personal: 'Personal',
+    shared: 'Shared',
+    account: 'Account',
+    apply: 'Apply',
+    noSearchResults: "Your search didn't yield results.",
+    noSearchResultsDescription: 'Please, try another search term.',
+    noData: 'There are no knowledge sources in this category yet.',
+    noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new knowledge sources.',
+  },
+  pt: {
+    title: 'Knowledge Sources',
+    description: 'Ao selecionar um ou mais knowledge sources, eles serão consultados para gerar as respostas.',
+    personal: 'Pessoal',
+    shared: 'Compartilhado',
+    account: 'Conta',
+    apply: 'Aplicar',
+    noSearchResults: 'Sua busca não produziu resultados.',
+    noSearchResultsDescription: 'Por favor, tente outra busca.',
+    noData: 'Ainda não há knowledge sources nesta categoria.',
+    noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos knowledge sources.',
+  },
+} satisfies Dictionary