@stack-spot/ai-chat-widget 0.1.0

package/dist/views/Workspaces.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@citric/core';
+import { Search } from '@citric/icons';
+import { Placeholder } from '@stack-spot/portal-components/Placeholder';
+import { workspaceClient } from '@stack-spot/portal-network';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useEffect, useMemo, useState } from 'react';
+import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup.js';
+import { IconInput } from '../components/IconInput.js';
+import { RightPanelForm } from '../components/RightPanelForm.js';
+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 { 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]);
+    return null;
+};
+const WorkspacesPanel = () => {
+    const t = useTranslate(dictionary);
+    const { close } = useRightPanel();
+    const chat = useCurrentChat();
+    const [filter, setFilter] = useState('');
+    const workspaces = workspaceClient.workspaces.useQuery({ aclOnly: false });
+    const [value, setValue] = useState(workspaces.find(w => w.id === chat.get('workspace')?.id));
+    const filtered = useMemo(() => filter ? workspaces.filter(w => w === value || w.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : workspaces, [workspaces, filter, value]);
+    function submit() {
+        if (value)
+            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 })] }));
+};
+const dictionary = {
+    en: {
+        title: 'Workspaces',
+        description: 'By selecting a workspace, its Knowledge Sources (KSs) will be consulted to generate the answers.',
+        apply: 'Apply',
+        noSearchResults: "Your search didn't yield results.",
+        noSearchResultsDescription: 'Please, try another search term.',
+        noData: 'There are no workspaces yet.',
+        noDataDescription: 'Use the AI portal to create new workspaces.',
+    },
+    pt: {
+        title: 'Workspaces',
+        description: 'Ao selecionar um workspace, seus Knowledge Sources (KSs) serão consultados para gerar as respostas.',
+        apply: 'Aplicar',
+        noSearchResults: 'Sua busca não produziu resultados',
+        noSearchResultsDescription: 'Por favor, tente outra busca.',
+        noData: 'Ainda não há workspace.',
+        noDataDescription: 'Use o Portal AI para criar novos workspaces.',
+    },
+};
+//# sourceMappingURL=Workspaces.js.map

package/dist/views/Workspaces.js.map

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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@stack-spot/ai-chat-widget",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "@citric/core": "^6.0.0",
+    "@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-theme": "^1.0.0",
+    "@stack-spot/portal-translate": "^1.1.0",
+    "lodash": "^4.17.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "6.1.10"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "cpy-cli": "^5.0.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "^5.0.7",
+    "styled-components": "6.1.10",
+    "tsc-esm-fix": "^2.20.26",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0",
+    "ulid": "^2.3.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  }
+}

package/src/StackspotAIWidget.tsx

@@ -0,0 +1,65 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useMemo, useRef } from 'react'
+import { quickCommandInterceptor } from './chat-interceptors/quick-commands'
+import { sendMessageInterceptor } from './chat-interceptors/send-message'
+import { TooltipProvider } from './components/Tooltip'
+import { useCurrentChatMessages, useFirstChat, useWidgetState } from './context/hooks'
+import { AIWidgetFeatures, defaultFeatures } from './features'
+import './layout.css'
+import { RightPanel } from './right-panel/RightPanel'
+import { RightPanelProvider } from './right-panel/RightPanelProvider'
+import { MessageInterceptor } from './state/ChatState'
+import { MinimizedActions } from './types'
+import { Chat } from './views/Chat'
+import { ChatTabSelection } from './views/ChatTabSelection'
+import { Home } from './views/Home'
+import { KnowledgeSources } from './views/KnowledgeSources'
+import { MessageInput } from './views/MessageInput'
+import { MinimizedHeader } from './views/MinimizedHeader'
+import { Stacks } from './views/Stacks'
+import { Workspaces } from './views/Workspaces'
+
+export interface AIWidgetProps {
+  features?: AIWidgetFeatures,
+  username: string,
+  interceptors?: MessageInterceptor[],
+  children?: React.ReactNode,
+  minimizedActions?: MinimizedActions,
+}
+
+export const StackspotAIWidget = (
+  { username, features = defaultFeatures, interceptors: userInterceptors = [], minimizedActions = {}, children }: AIWidgetProps,
+) => {
+  const interceptors: MessageInterceptor[] = useMemo(() => [...userInterceptors, quickCommandInterceptor, sendMessageInterceptor], [])
+  useFirstChat(interceptors)
+  const rightPanelRef = useRef<HTMLDivElement>(null)
+  const chatWindowRef = useRef<HTMLDivElement>(null)
+  const currentChat = useCurrentChatMessages()
+  const isMinimized = useWidgetState('isMinimized')
+  const isCurrentChatEmpty = currentChat.length === 0
+
+  return useMemo(() => (
+    <TooltipProvider>
+      <RightPanelProvider chatWindow={chatWindowRef} panel={rightPanelRef}>
+        <div className={listToClass(['ai-chat-widget', isMinimized && 'minimized'])}>
+          <div className="chat-window" ref={chatWindowRef}>
+            {isMinimized
+              ? <MinimizedHeader {...minimizedActions} />
+              : <ChatTabSelection history={features?.chatHistory} interceptors={interceptors}/>
+            }
+            <div className="chat-container">
+              <div className="chat-content">
+                {isCurrentChatEmpty ? (children ?? <Home username={username} />) : <Chat username={username} />}
+              </div>
+              <MessageInput features={features} />
+            </div>
+          </div>
+          <Stacks />
+          <Workspaces />
+          <KnowledgeSources />
+          {!isMinimized && <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>}
+        </div>
+      </RightPanelProvider>
+    </TooltipProvider>
+  ), [isCurrentChatEmpty, features, username, isMinimized])
+}

package/src/chat-interceptors/quick-commands.ts

@@ -0,0 +1,12 @@
+import { ChatEntry } from '../state/ChatEntry'
+import { ChatState } from '../state/ChatState'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function quickCommandInterceptor(entry: ChatEntry, _chat: ChatState) {
+  const { agent, content } = entry.getValue()
+  if (agent !== 'user') return
+  if (content.startsWith('/')) {
+    alert('Quick commands are not yet supported!') /* todo */
+    return false // by returning false, the next interceptor are not run. i.e. the message is not sent to the AI agent.
+  }
+}

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

@@ -0,0 +1,35 @@
+import { aiClient, StackspotAPIError } from '@stack-spot/portal-network'
+import { ChatEntry } from '../state/ChatEntry'
+import { ChatState } from '../state/ChatState'
+import { buildConversationContext } from '../utils/chat'
+
+export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState) {
+  const { agent, content } = entry.getValue()
+  if (agent !== 'user') return
+  const context = buildConversationContext(chat)
+  chat.set('isLoading', true)
+  // if this is the first message, let's rename the chat.
+  if (chat.getMessages().length === 1) {
+    chat.set('label', content)
+  }
+  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(),
+  }))
+  try {
+    await stream.getValue()
+  } catch (error: any) {
+    botEntry.setValue({
+      ...botEntry.getValue(),
+      error: error instanceof StackspotAPIError ? error.translate() : (error.message ?? `${error}`),
+    })
+  }
+  botEntry.finish()
+  chat.set('isLoading', false)
+}

package/src/components/Accordion.tsx

@@ -0,0 +1,64 @@
+/* Copiar do EDP ou usar o AnimatedHeight da lib de components */
+
+import { ChevronDown } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { WithStyle } from '@stack-spot/portal-theme'
+import React, { useState } from 'react'
+import { styled } from 'styled-components'
+import { WithChildren } from '../types'
+
+interface Props extends WithStyle, Required<WithChildren> {
+  header: React.ReactNode,
+  startExpanded?: boolean,
+}
+
+const StyledAccordion = styled.div`
+  > header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+
+    > button {
+      transition: transform 0.3s ease-out;
+      background: transparent;
+      border: none;
+      padding: 0;
+
+      &:hover {
+        background: transparent;
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+        margin: 4px;
+      }
+    }
+
+    &.expanded > button {
+      transform: rotate(180deg);
+    }
+  }
+
+  > .accordion-content {
+    padding: 10px;
+  }
+`
+
+export const Accordion = ({ children, header, className, startExpanded, style }: Props) => {
+  const [expanded, setExpanded] = useState(startExpanded)
+  return (
+    <AnimatedHeight style={style} className={className}>
+      <StyledAccordion>
+        <header className={expanded ? 'expanded' : ''}>
+          {header}
+          <IconButton onClick={() => setExpanded(v => !v)}><ChevronDown /></IconButton>
+        </header>
+        {expanded ? <div className="accordion-content">{children}</div> : null}
+      </StyledAccordion>
+    </AnimatedHeight>
+  )
+}

package/src/components/AdaptiveTextArea.tsx

@@ -0,0 +1,34 @@
+import { Textarea } from '@citric/core'
+import { useEffect, useRef } from 'react'
+import { PropsOf } from '../types'
+
+interface Props extends PropsOf<typeof Textarea> {
+  onIncreaseSize?: () => void,
+  onResetSize?: () => void,
+  maxHeight?: number,
+}
+
+export const AdaptiveTextArea = ({ value, onIncreaseSize, onResetSize, maxHeight, style, ...props }: Props) => {
+  const ref = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    const height = ref.current.clientHeight
+    const scroll = ref.current.scrollHeight
+    if (!maxHeight || height < maxHeight) {
+      ref.current.style.overflowY = 'hidden'
+      if (height < scroll) {
+        ref.current.style.height = `${scroll}px`
+        onIncreaseSize?.()
+      }
+    } else if (maxHeight) {
+      ref.current.style.overflowY = 'auto'
+    }
+    if (!value) {
+      ref.current.style.height = ''
+      onResetSize?.()
+    }
+  }, [value, maxHeight])
+
+  return <Textarea {...props} ref={ref} value={value} style={{ ...style, maxHeight }} />
+}

package/src/components/Code.tsx

@@ -0,0 +1,201 @@
+/**
+ * Copied from the extension's webview.
+ */
+
+import { AddCode, ChevronDoubleDown, Copy } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { theme, useThemeKind } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { CSSProperties } from 'react'
+import { ExtraProps } from 'react-markdown'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { materialDark, vs } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import styled from 'styled-components'
+import { WithChildren } from '../types'
+
+export type CodeAction = (
+  code: string,
+  language: string,
+) => void
+
+type CodeProps = React.ClassAttributes<HTMLElement>
+  & React.HTMLAttributes<HTMLElement>
+  & ExtraProps
+  & { messageId?: string }
+
+export interface Props extends WithChildren {
+  showActionBar?: boolean,
+  onInsertCode?: CodeAction,
+  onNewFile?: CodeAction,
+  onCopyCode?: CodeAction,
+  language?: string,
+}
+
+const CodeBox = styled.code`
+  background: ${theme.color.light[500]};
+  border-radius: 6px;
+  overflow: hidden;
+
+  .highlighter {
+    margin: 0 !important;
+  }
+
+  code {
+    font-size: 13px !important;
+    font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace !important;
+    background-color: transparent !important;
+
+    .linenumber {
+      color: ${theme.color.light.contrastText} !important;
+      opacity: 0.6;
+      min-width: 20px !important;
+    }
+  }
+
+  .action-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    background: ${theme.color.light[600]};
+    padding: 4px 6px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+
+    button {
+      background: transparent;
+      border: none;
+      opacity: 0.75;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.light {
+    border: 1px solid rgb(221, 221, 221);
+
+    > div {
+      border: none !important;
+    }
+
+    .action-bar {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+`
+
+const lineNumbersStyle: CSSProperties = {
+  userSelect: 'none',
+}
+
+export const Code = ({
+  className,
+  onInsertCode,
+  onNewFile,
+  onCopyCode,
+  language,
+  children,
+  showActionBar,
+  ...props
+}: Pick<CodeProps, 'className' | 'messageId'> & Props) => {
+  const t = useTranslate(dictionary)
+  const themeKind = useThemeKind()
+  const match = /language-(\w+)/.exec(className || '')
+  const computedLanguage = language ?? (match ?? [])[1]?.toLowerCase() ?? 'txt'
+  const content = String(children ?? '').replaceAll(/\n\t/g, '\n').trim()
+
+  function onClickInsert() {
+    onInsertCode?.(content, computedLanguage)
+  }
+
+  function onClickNewFile() {
+    onNewFile?.(content, computedLanguage)
+  }
+
+  function onClickCopy() {
+    onCopyCode?.(content, computedLanguage)
+    // try-catch because the client may not support `navigator.clipboard`. Example: Chromium Embedded Browser (CEF).
+    try {
+      navigator.clipboard.writeText(content)
+    } catch { /* empty */ }
+  }
+
+  if (children === undefined) return <></>
+  if (!(/language-(\w+)/.exec(className || ''))) {
+    return (
+      <code {...props} className={className}>
+        {children}
+      </code>
+    )
+  }
+
+  return (
+    <CodeBox className={['code-box', themeKind].join(' ')}>
+      {showActionBar && (
+        <div className="action-bar" role="toolbar">
+          <IconButton
+            aria-label={t.copy}
+            title={t.copy}
+            onClick={onClickCopy}
+            style={{ position: 'relative' }}
+          >
+            <Copy />
+          </IconButton>
+          {onInsertCode
+            ? (
+              <IconButton
+                aria-label={t.insert}
+                title={t.insert}
+                onClick={onClickInsert}
+                style={{ position: 'relative' }}
+              >
+                <ChevronDoubleDown style={{ transform: 'rotate(90deg)' }} />
+              </IconButton>
+            )
+            : null}
+          {onNewFile
+            ? (
+              <IconButton
+                aria-label={t.newFile}
+                title={t.newFile}
+                onClick={onClickNewFile}
+                style={{ position: 'relative' }}
+              >
+                <AddCode />
+              </IconButton>
+            )
+            : null}
+        </div>
+      )}
+      <div>
+        <SyntaxHighlighter
+          {...props}
+          className="highlighter"
+          style={themeKind === 'dark' ? materialDark : vs}
+          language={computedLanguage}
+          PreTag="div"
+          showLineNumbers={true}
+          lineNumberContainerStyle={lineNumbersStyle}
+          lineNumberStyle={lineNumbersStyle}
+        >
+          {content}
+        </SyntaxHighlighter>
+      </div>
+    </CodeBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    copy: 'Copy code to the clipboard',
+    insert: 'Inject code into editor',
+    newFile: 'Creates a new file with this code as its content',
+  },
+  pt: {
+    copy: 'Copiar código para a área de transferência',
+    insert: 'Inserir código no editor',
+    newFile: 'Criar um novo arquivo com este código como conteúdo',
+  },
+} satisfies Dictionary

package/src/components/Editor.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable no-empty-pattern */
+/* Copiar do portal AI? */
+import { WithStyle } from '@stack-spot/portal-theme'
+
+
+interface Props extends WithStyle {
+  value: string,
+  onChange: (value: string) => void,
+  language: string,
+}
+
+export const Editor = ({}: Props) => null