@stack-spot/ai-chat-widget 0.5.0 → 0.7.0

package/src/views/Editor.tsx

@@ -1 +1,126 @@
-export const Editor = () => null
+import { Text } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import MonacoEditor, { OnMount } from '@monaco-editor/react'
+import { Select } from '@stack-spot/portal-components/Select'
+import { useThemeKind } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { debounce } from 'lodash'
+import { IDisposable } from 'monaco-editor'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { styled } from 'styled-components'
+import { useCurrentChat, useCurrentChatState, useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { languages } from '../utils/programming-languages'
+
+const DEFAULT_LANGUAGE = 'python'
+const MIN_SELECTION_UPDATE_MS = 200
+
+const EditorBox = styled.div`
+  flex: 1;
+
+  .monaco-editor {
+    --vscode-editor-background: transparent !important;
+    --vscode-editorGutter-background: transparent !important;
+  }
+`
+
+const TitleBox = styled.div`
+  .language-selector {
+    width: 150px;
+    position: absolute;
+    top: 21px;
+    right: 61px;
+
+    .options {
+      max-height: 250px;
+    }
+
+    .current-value {
+      padding: 2px 8px;
+    }
+  }
+`
+
+export const Editor = () => {
+  const t = useTranslate(dictionary)
+  const panel = useWidgetState('panel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+  const chat = useCurrentChat()
+
+  useEffect(() => {
+    if (panel === 'editor') open(
+      <EditorPanel key={chat.id} />,
+      {
+        title: <Title key={chat.id} />,
+        description: t.description,
+        onClose: () => widget.set('panel', undefined),
+      },
+    )
+  }, [panel, t, chat])
+
+  return null
+}
+
+const Title = () => {
+  const languageValue = useCurrentChatState('codeLanguage') || DEFAULT_LANGUAGE
+  const language = useMemo(() => languages.find(l => l.value === languageValue), [languageValue])
+  const chat = useCurrentChat()
+  return (
+    <TitleBox>
+      <Text appearance="h5">Editor</Text>
+      <Select
+        options={languages}
+        renderLabel={l => l.label}
+        renderValue={l => l.value}
+        value={language}
+        onChange={l => chat.set('codeLanguage', l.value)}
+        className="language-selector"
+      />
+    </TitleBox>
+  )
+}
+
+const EditorPanel = () => {
+  const themeKind = useThemeKind()
+  const value = useCurrentChatState('code')
+  const language = useCurrentChatState('codeLanguage') || DEFAULT_LANGUAGE
+  const chat = useCurrentChat()
+  const selectionObserver = useRef<IDisposable | undefined>()
+
+  const setup: OnMount = useCallback((editor) => {
+    selectionObserver.current = editor.onDidChangeCursorSelection(debounce((e) => {
+      const selectedText = editor.getModel()?.getValueInRange(e.selection)
+      chat.set('codeSelection', selectedText?.trim() ? selectedText : undefined)
+    }, MIN_SELECTION_UPDATE_MS))
+  }, [])
+
+  useEffect(() => () => {
+    chat.set('codeSelection', undefined)
+    selectionObserver.current?.dispose()
+  }, [])
+  
+  return (
+    <EditorBox>
+      <MonacoEditor
+        height="100%"
+        language={language}
+        theme={themeKind === 'dark' ? 'vs-dark' : 'light'}
+        options={{ minimap: { enabled: false } }}
+        value={value}
+        onChange={v => chat.set('code', v)}
+        loading={<LoadingCircular />}
+        onMount={setup}
+      />
+    </EditorBox>
+  )
+}
+
+const dictionary = {
+  en: {
+    description: 'The selected code in the editor below will be used as part of your questions.',
+  },
+  pt: {
+    description: 'O código selecionado no editor abaixo será usado como parte das suas perguntas.',
+  },
+} satisfies Dictionary

package/src/views/MessageInput/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, KnowledgeSource, Send, Stack, Times, Workspace } from '@citric/icons'
+import { ChevronRight, Code, 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'
@@ -62,6 +62,11 @@ export const ButtonGroup = ({ features, onSend, onCancel, expanded, setExpanded,
               <Stack />
             </IconButton>
           )}
+          {features.editor && (
+            <IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('panel', 'editor')}>
+              <Code />
+            </IconButton>
+          )}
         </div>
         <IconButton
           title={expanded ? t.collapse : t.expand}

package/src/views/MessageInput/InfoBar.tsx

@@ -1,5 +1,6 @@
 import { Times, TimesMini } from '@citric/icons'
 import { Badge, IconButton } from '@citric/ui'
+import { loader } from '@monaco-editor/react'
 import { ColorPaletteName, listToClass } from '@stack-spot/portal-theme'
 import { useCallback, useMemo } from 'react'
 import { FadingOverflow } from '../../components/FadingOverflow'
@@ -26,7 +27,8 @@ export const InfoBar = () => {
   const currentStack = useCurrentChatState('stack')
   const currentWorkspace = useCurrentChatState('workspace')
   const currentKnowledgeSources = useCurrentChatState('knowledgeSources')
-  const visible = !!(currentStack || currentWorkspace || currentKnowledgeSources?.length)
+  const currentSelection = useCurrentChatState('codeSelection')
+  const visible = !!(currentStack || currentWorkspace || currentKnowledgeSources?.length || currentSelection)
   const ksToRender = useMemo(() => currentKnowledgeSources?.map(ks => {
     const onDismiss = () => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id))
     return <li key={ks.id}><InfoBadge label={ks.label} dismiss={t.removeKS} color="teal" onDismiss={onDismiss} /></li>
@@ -36,6 +38,12 @@ export const InfoBar = () => {
     chat.set('knowledgeSources', [])
     chat.set('stack', undefined)
     chat.set('workspace', undefined)
+    removeCodeSelection()
+  }, [])
+
+  const removeCodeSelection = useCallback(() => {
+    const editor = loader.__getMonacoInstance()?.editor
+    editor?.getEditors()[0].setSelection({ startLineNumber: 0, endLineNumber: 0, endColumn: 0, startColumn: 0 })
   }, [])
 
   return (
@@ -45,6 +53,11 @@ export const InfoBar = () => {
         <IconButton aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}><Times /></IconButton>
         <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
           <ul>
+            {currentSelection && (
+              <li>
+                <InfoBadge label={t.selected} dismiss={t.removeSelection} color="blue" onDismiss={removeCodeSelection} />
+              </li>
+            )}
             {currentStack && (
               <li>
                 <InfoBadge label={currentStack.label} dismiss={t.removeStack} color="cyan" onDismiss={() => chat.set('stack', undefined)} />

package/src/views/MessageInput/dictionary.ts

@@ -15,6 +15,8 @@ const dictionary = {
     removeStack: 'Stop using the current stack',
     removeWorkspace: 'Stop using the current workspace',
     removeKS: 'Stop using this knowledge source',
+    selected: 'Selected',
+    removeSelection: 'Remove current code selection',
   },
   pt: {
     stack: 'Selecionar stack',
@@ -30,6 +32,8 @@ const dictionary = {
     removeStack: 'Parar de usar a stack atual',
     removeWorkspace: 'Parar de usar o workspace atual',
     removeKS: 'Parar de usar este knowledge source',
+    selected: 'Selecionado',
+    removeSelection: 'Desfazer seleção de código',
   },
 } satisfies Dictionary
 

package/src/views/MessageInput/index.tsx

@@ -28,7 +28,10 @@ export const MessageInput = ({ features }: Props) => {
   const onSend = useCallback(async () => {
     const message = chat.get('nextMessage')
     if (!message) return
-    chat.pushMessage(ChatEntry.createUserEntry(message))
+    const code = chat.get('codeSelection')
+    const language = chat.get('codeLanguage')
+    const prompt = code ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
+    chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
     chat.set('nextMessage', '')
     setFocused(false)
   }, [chat])