ishangsf/DeepCodeGeniusWeb-vscode
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #73 from covespace/57-dont-drag-me-to-the-end-of-the-response-being-generated

Browse Source 
57 dont drag me to the end of the response being generated
This commit is contained in:
Rankin Zheng 2023-05-18 08:27:46 +08:00 committed by GitHub
commit 8e84acab08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22649 additions and 22631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45234
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

46
src/views/ChatPanel.tsx → src/views/ChatPanel/index.tsx
View File

@ -1,20 +1,20 @@
import * as React from 'react';
import { useState, useEffect, useRef } from 'react';
import { Accordion, AccordionControlProps, Avatar, Box, Center, Container, CopyButton, Divider, Flex, Grid, Stack, Textarea, TypographyStylesProvider, px, rem, useMantineTheme } from '@mantine/core';
import { Accordion, AccordionControlProps, Avatar, Box, Center, Code, 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';
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 { useElementSize, useInterval, useListState, useResizeObserver, useTimeout, useViewportSize, useWindowScroll } from '@mantine/hooks';
import { IconAdjustments, IconBulb, IconCameraSelfie, IconCheck, IconClick, IconColumnInsertRight, IconCopy, IconDots, IconEdit, IconFileDiff, IconFolder, IconGitCommit, IconGitCompare, IconMessageDots, IconMessagePlus, IconPlayerStop, 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';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia';
import messageUtil from '../util/MessageUtil';
import messageUtil from '../../util/MessageUtil';
const blink = keyframes({
@ -50,7 +50,9 @@ const chatPanel = () => {
const { classes } = useStyles();
const { height, width } = useViewportSize();
const [inputRef, inputRect] = useResizeObserver();
const messageCount = 5;
const [scrollPosition, onScrollPositionChange] = useState({ x: 0, y: 0 });
const [stopScrolling, setStopScrolling] = useState(false);
const messageCount = 10;
const handlePlusClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setMenuType('contexts');
@ -68,7 +70,7 @@ const chatPanel = () => {
return `[context|${file}]`;
});
const text = input + contextStrs.join(' ');
console.log(`message text: ${text}`);
// console.log(`message text: ${text}`);
messageUtil.sendMessage({
command: 'sendMessage',
text: text
@ -96,16 +98,35 @@ const chatPanel = () => {
const scrollToBottom = () =>
scrollViewport?.current?.scrollTo({ top: scrollViewport.current.scrollHeight, behavior: 'smooth' });
const timer = useTimeout(() => {
// console.log(`stopScrolling:${stopScrolling}`);
if (!stopScrolling) {
scrollToBottom();
}
}, 1000);
useEffect(() => {
inputRef.current.focus();
messageUtil.sendMessage({ command: 'regContextList' });
messageUtil.sendMessage({ command: 'regCommandList' });
messageUtil.sendMessage({ command: 'historyMessages' });
setTimeout(() => {
scrollToBottom();
}, 2000);
timer.start();
return () => {
timer.clear();
};
}, []);
useEffect(() => {
const sh = scrollViewport.current?.scrollHeight || 0;
const vh = scrollViewport.current?.clientHeight || 0;
const isBottom = sh < vh ? true : sh - vh - scrollPosition.y < 3;
if (isBottom) {
setStopScrolling(false);
} else {
setStopScrolling(true);
}
}, [scrollPosition]);
useEffect(() => {
if (generating) {
// new a bot message
@ -121,13 +142,14 @@ const chatPanel = () => {
// update the last one bot message
messageHandlers.setItem(lastIndex, { type: 'bot', message: currentMessage });
}
timer.start();
}, [currentMessage]);
useEffect(() => {
console.log(`message length: ${messages.length}`);
if (messages.length > messageCount * 2) {
messageHandlers.remove(0, 1);
}
timer.start();
}, [messages]);
// Add the received message to the chat UI as a bot message
@ -137,13 +159,11 @@ const chatPanel = () => {
messageUtil.registerHandler('receiveMessagePartial', (message: { text: string; }) => {
setCurrentMessage(message.text);
setResponsed(true);
scrollToBottom();
});
messageUtil.registerHandler('receiveMessage', (message: { text: string; }) => {
setCurrentMessage(message.text);
setGenerating(false);
setResponsed(true);
scrollToBottom();
});
messageUtil.registerHandler('regCommandList', (message: { result: { pattern: string; description: string; name: string }[] }) => {
commandMenusHandlers.append(...message.result);
@ -187,9 +207,6 @@ const chatPanel = () => {
const contexts = context.map(({ content, role }) => ({ context: JSON.parse(content) }));
messageHandlers.append({ type: 'user', message: request, contexts: contexts });
messageHandlers.append({ type: 'bot', message: response });
if (index === message.entries.length - 1) {
scrollToBottom();
}
});
});
}, [registed]);
@ -500,6 +517,7 @@ const chatPanel = () => {
h={generating ? height - px('8rem') : height - px('5rem')}
w={width - px('2rem')}
type="never"
onScrollPositionChange={onScrollPositionChange}
viewportRef={scrollViewport}>
{messageList.length > 0 ? messageList : defaultMessages}
</ScrollArea>