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

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])