diff --git a/src/views/ChatPanel.tsx b/src/views/ChatPanel.tsx index b19473c..cdf1732 100644 --- a/src/views/ChatPanel.tsx +++ b/src/views/ChatPanel.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useState, useEffect, useRef } from 'react'; -import { Avatar, Center, Container, CopyButton, Divider, Flex, Grid, Stack, Textarea, TypographyStylesProvider, px, rem, useMantineTheme } from '@mantine/core'; +import { Accordion, AccordionControlProps, Avatar, Box, Center, Container, CopyButton, Divider, Flex, Grid, Stack, Textarea, TypographyStylesProvider, px, rem, useMantineTheme } from '@mantine/core'; import { Input, Tooltip } from '@mantine/core'; import { List } from '@mantine/core'; import { ScrollArea } from '@mantine/core'; @@ -8,7 +8,7 @@ import { createStyles, keyframes } from '@mantine/core'; import { ActionIcon } from '@mantine/core'; import { Menu, Button, Text } from '@mantine/core'; import { useElementSize, useListState, useResizeObserver, useViewportSize } from '@mantine/hooks'; -import { IconAdjustments, IconBulb, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconEdit, IconFileDiff, IconFolder, IconGitCompare, IconMessageDots, IconMessagePlus, IconPrompt, IconRobot, IconSend, IconSquareRoundedPlus, IconTerminal2, IconUser } from '@tabler/icons-react'; +import { IconAdjustments, IconBulb, IconCameraSelfie, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconDots, IconEdit, IconFileDiff, IconFolder, IconGitCompare, IconMessageDots, IconMessagePlus, IconPrinter, IconPrompt, IconReplace, IconRobot, IconSend, IconSquareRoundedPlus, IconTerminal2, IconUser, IconX } from '@tabler/icons-react'; import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react'; import { Prism } from '@mantine/prism'; import ReactMarkdown from 'react-markdown'; @@ -37,8 +37,9 @@ const chatPanel = () => { const chatContainerRef = useRef(null); const scrollViewport = useRef(null); const [messages, messageHandlers] = useListState<{ type: string; message: string; }>([]); - const [commands, commandHandlers] = useListState<{ pattern: string; description: string; name: string }>([]); - const [contexts, contextHandlers] = useListState<{ pattern: string; description: string; name: string }>([]); + const [commandMenus, commandMenusHandlers] = useListState<{ pattern: string; description: string; name: string }>([]); + const [contextMenus, contextMenusHandlers] = useListState<{ pattern: string; description: string; name: string }>([]); + const [contexts, contextsHandlers] = useListState([]); const [currentMessage, setCurrentMessage] = useState(''); const [generating, setGenerating] = useState(false); const [responsed, setResponsed] = useState(false); @@ -76,6 +77,15 @@ const chatPanel = () => { setCurrentMessage(''); } }; + + const handleContextClick = (contextName: string) => { + // Process and send the message to the extension + messageUtil.sendMessage({ + command: 'addContext', + selected: contextName + }); + }; + const scrollToBottom = () => scrollViewport?.current?.scrollTo({ top: scrollViewport.current.scrollHeight, behavior: 'smooth' }); @@ -118,12 +128,38 @@ const chatPanel = () => { scrollToBottom(); }); messageUtil.registerHandler('regCommandList', (message: { result: { pattern: string; description: string; name: string }[] }) => { - commandHandlers.append(...message.result); - console.log(`commands:${commands}`); + commandMenusHandlers.append(...message.result); }); messageUtil.registerHandler('regContextList', (message: { result: { pattern: string; description: string; name: string }[] }) => { - contextHandlers.append(...message.result); - console.log(`contexts:${commands}`); + contextMenusHandlers.append(...message.result); + }); + messageUtil.registerHandler('appendContext', (message: { command: string; context: string }) => { + // context is a temp file path + const match = /\|([^]+?)\]/.exec(message.context); + // Process and send the message to the extension + messageUtil.sendMessage({ + command: 'contextDetail', + file: match && match[1], + }); + }); + messageUtil.registerHandler('contextDetailResponse', (message: { command: string; file: string; result: string }) => { + //result is a content json + // 1. diff json structure + // { + // languageId: languageId, + // path: fileSelected, + // content: codeSelected + // }; + // 2. command json structure + // { + // command: commandString, + // content: stdout + // }; + const context = JSON.parse(message.result); + if (typeof context !== 'undefined' && context) { + contextsHandlers.append(context); + console.log(context); + } }); }, [registed]); @@ -149,7 +185,7 @@ const chatPanel = () => { No messages yet ); - const commandMenus = commands.map(({ pattern, description, name }, index) => { + const commandMenusNode = commandMenus.map(({ pattern, description, name }, index) => { return ( { setInput(`/${pattern} `); }} @@ -170,17 +206,19 @@ const chatPanel = () => { ); }); - const contextMenus = contexts.map(({ pattern, description, name }, index) => { + const contextMenusNode = contextMenus.map(({ pattern, description, name }, index) => { return ( { setInput(`/${name} `); }} + onClick={() => { + handleContextClick(name); + }} icon={} > - /{name} + {name} { ); }); - const messageList = messages.map(({ message: messageText, type: messageType }, index) => { // setMessage(messageText); return (<> @@ -268,11 +305,16 @@ const chatPanel = () => { - + + + + + + {value} @@ -317,69 +359,103 @@ const chatPanel = () => { viewportRef={scrollViewport}> {messageList.length > 0 ? messageList : defaultMessages} - setMenuType('')} - onOpen={() => menuType !== '' ? setMenuOpend(true) : setMenuOpend(false)} - returnFocus={true}> - -