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

Merge pull request #174 from covespace/fix-hello-load-error

Browse Source 
Fix hello load error
This commit is contained in:
Rankin Zheng 2023-06-09 11:21:25 +08:00 committed by GitHub
commit c16d7e1404
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 99 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.tsx
View File

@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { MantineProvider } from '@mantine/core'; import { MantineProvider } from '@mantine/core';
import App from './views/App'; import App from './views/App';
import store from './views/store'; import { store } from './views/store';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
const container = document.getElementById('app')!; const container = document.getElementById('app')!;

50
src/views/ChatPanel/Icons.tsx
View File

@ -9,8 +9,8 @@ export interface TablerIconsProps extends Partial<Omit<React.SVGProps<SVGSVGElem
export const IconMouseRightClick = (props: TablerIconsProps) => { export const IconMouseRightClick = (props: TablerIconsProps) => {
const { color, size, style } = props; const { color, size, style } = props;
return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 9C5.5 5.41015 8.41015 2.5 12 2.5H24C27.5899 2.5 30.5 5.41015 30.5 9V21C30.5 27.9036 24.9036 33.5 18 33.5C11.0964 33.5 5.5 27.9036 5.5 21V9Z" stroke={color} stroke-width="3" /> <path d="M5.5 9C5.5 5.41015 8.41015 2.5 12 2.5H24C27.5899 2.5 30.5 5.41015 30.5 9V21C30.5 27.9036 24.9036 33.5 18 33.5C11.0964 33.5 5.5 27.9036 5.5 21V9Z" stroke={color} strokeWidth="3" />
<path d="M7 15H29.5" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M7 15H29.5" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<rect x="18" y="4" width="11" height="10" fill={color} /> <rect x="18" y="4" width="11" height="10" fill={color} />
</svg>); </svg>);
}; };
@ -19,12 +19,12 @@ export const IconMouseRightClick = (props: TablerIconsProps) => {
export const IconGitBranchChecked = (props: TablerIconsProps) => { export const IconGitBranchChecked = (props: TablerIconsProps) => {
const { color, size, style } = props; const { color, size, style } = props;
return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 12L9 24" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 12L9 24" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M27 14V14C27 16.599 24.8931 18.7059 22.2941 18.7059H14.2941C11.3703 18.7059 9 21.0761 9 24V24" stroke={color} stroke-width="3" /> <path d="M27 14V14C27 16.599 24.8931 18.7059 22.2941 18.7059H14.2941C11.3703 18.7059 9 21.0761 9 24V24" stroke={color} strokeWidth="3" />
<path d="M27 13.5C29.4853 13.5 31.5 11.4853 31.5 9C31.5 6.51472 29.4853 4.5 27 4.5C24.5147 4.5 22.5 6.51472 22.5 9C22.5 11.4853 24.5147 13.5 27 13.5Z" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M27 13.5C29.4853 13.5 31.5 11.4853 31.5 9C31.5 6.51472 29.4853 4.5 27 4.5C24.5147 4.5 22.5 6.51472 22.5 9C22.5 11.4853 24.5147 13.5 27 13.5Z" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9 34C11.4853 34 13.5 31.9853 13.5 29.5C13.5 27.0147 11.4853 25 9 25C6.51472 25 4.5 27.0147 4.5 29.5C4.5 31.9853 6.51472 34 9 34Z" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 34C11.4853 34 13.5 31.9853 13.5 29.5C13.5 27.0147 11.4853 25 9 25C6.51472 25 4.5 27.0147 4.5 29.5C4.5 31.9853 6.51472 34 9 34Z" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9 11C11.4853 11 13.5 8.98528 13.5 6.5C13.5 4.01472 11.4853 2 9 2C6.51472 2 4.5 4.01472 4.5 6.5C4.5 8.98528 6.51472 11 9 11Z" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 11C11.4853 11 13.5 8.98528 13.5 6.5C13.5 4.01472 11.4853 2 9 2C6.51472 2 4.5 4.01472 4.5 6.5C4.5 8.98528 6.51472 11 9 11Z" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21 28L25.5 32.5L34 24" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M21 28L25.5 32.5L34 24" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
</svg>); </svg>);
}; };
@ -32,21 +32,21 @@ export const IconGitBranchChecked = (props: TablerIconsProps) => {
export const IconGitBranch = (props: TablerIconsProps) => { export const IconGitBranch = (props: TablerIconsProps) => {
const { color, size, style } = props; const { color, size, style } = props;
return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 12L9 24" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 12L9 24" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M27 14V14C27 16.599 24.8931 18.7059 22.2941 18.7059H14.2941C11.3703 18.7059 9 21.0761 9 24V24" stroke={color} stroke-width="3" /> <path d="M27 14V14C27 16.599 24.8931 18.7059 22.2941 18.7059H14.2941C11.3703 18.7059 9 21.0761 9 24V24" stroke={color} strokeWidth="3" />
<path d="M27 13.5C29.4853 13.5 31.5 11.4853 31.5 9C31.5 6.51472 29.4853 4.5 27 4.5C24.5147 4.5 22.5 6.51472 22.5 9C22.5 11.4853 24.5147 13.5 27 13.5Z" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M27 13.5C29.4853 13.5 31.5 11.4853 31.5 9C31.5 6.51472 29.4853 4.5 27 4.5C24.5147 4.5 22.5 6.51472 22.5 9C22.5 11.4853 24.5147 13.5 27 13.5Z" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9 34C11.4853 34 13.5 31.9853 13.5 29.5C13.5 27.0147 11.4853 25 9 25C6.51472 25 4.5 27.0147 4.5 29.5C4.5 31.9853 6.51472 34 9 34Z" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 34C11.4853 34 13.5 31.9853 13.5 29.5C13.5 27.0147 11.4853 25 9 25C6.51472 25 4.5 27.0147 4.5 29.5C4.5 31.9853 6.51472 34 9 34Z" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9 11C11.4853 11 13.5 8.98528 13.5 6.5C13.5 4.01472 11.4853 2 9 2C6.51472 2 4.5 4.01472 4.5 6.5C4.5 8.98528 6.51472 11 9 11Z" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M9 11C11.4853 11 13.5 8.98528 13.5 6.5C13.5 4.01472 11.4853 2 9 2C6.51472 2 4.5 4.01472 4.5 6.5C4.5 8.98528 6.51472 11 9 11Z" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
</svg>); </svg>);
}; };
export const IconShellCommand = (props: TablerIconsProps) => { export const IconShellCommand = (props: TablerIconsProps) => {
const { color, size, style } = props; const { color, size, style } = props;
return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.5 5.5H7.5C5.84315 5.5 4.5 6.7934 4.5 8.38889V28.6111C4.5 30.2066 5.84315 31.5 7.5 31.5H28.5C30.1569 31.5 31.5 30.2066 31.5 28.6111V8.38889C31.5 6.7934 30.1569 5.5 28.5 5.5Z" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M28.5 5.5H7.5C5.84315 5.5 4.5 6.7934 4.5 8.38889V28.6111C4.5 30.2066 5.84315 31.5 7.5 31.5H28.5C30.1569 31.5 31.5 30.2066 31.5 28.6111V8.38889C31.5 6.7934 30.1569 5.5 28.5 5.5Z" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12 24L15 21L12 18" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12 24L15 21L12 18" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.5 11H31" stroke={color} stroke-width="3" /> <path d="M5.5 11H31" stroke={color} strokeWidth="3" />
<path d="M20 24L24 24" stroke={color} stroke-width="3" stroke-linecap="round" /> <path d="M20 24L24 24" stroke={color} strokeWidth="3" strokeLinecap="round" />
</svg>); </svg>);
}; };
@ -54,14 +54,14 @@ export const IconShellCommand = (props: TablerIconsProps) => {
export const IconBook = (props: TablerIconsProps) => { export const IconBook = (props: TablerIconsProps) => {
const { color, size, style } = props; const { color, size, style } = props;
return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> return (<svg width={size} height={size} style={style} viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.75 5.25H12C15.3137 5.25 18 7.93628 18 11.25V30.5C18 28.0147 15.9853 27 13.5 27H2.75V5.25Z" stroke={color} stroke-width="3" stroke-linejoin="round" /> <path d="M2.75 5.25H12C15.3137 5.25 18 7.93628 18 11.25V30.5C18 28.0147 15.9853 27 13.5 27H2.75V5.25Z" stroke={color} strokeWidth="3" strokeLinejoin="round" />
<path d="M33.25 5.25H24C20.6863 5.25 18 7.93628 18 11.25V30.5C18 28.0147 20.0147 27 22.5 27H33.25V5.25Z" stroke={color} stroke-width="3" stroke-linejoin="round" /> <path d="M33.25 5.25H24C20.6863 5.25 18 7.93628 18 11.25V30.5C18 28.0147 20.0147 27 22.5 27H33.25V5.25Z" stroke={color} strokeWidth="3" strokeLinejoin="round" />
<path d="M8 11L13 11" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 11L13 11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M23 11L28 11" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M23 11L28 11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8 16L13 16" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 16L13 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M23 16L28 16" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M23 16L28 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8 21L13 21" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 21L13 21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M23 21L28 21" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M23 21L28 21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<rect x="15" y="26" width="6" height="6" rx="2" fill={color} /> <rect x="15" y="26" width="6" height="6" rx="2" fill={color} />
<path d="M14 29C14.8 29.4 15 29.8333 15 30V26.5H11.5V28.5C12 28.5 13.2 28.6 14 29Z" fill={color} /> <path d="M14 29C14.8 29.4 15 29.8333 15 30V26.5H11.5V28.5C12 28.5 13.2 28.6 14 29Z" fill={color} />
<path d="M22 29C21.2 29.4 21 29.8333 21 30V26.5H24.5V28.5C24 28.5 22.8 28.6 22 29Z" fill={color} /> <path d="M22 29C21.2 29.4 21 29.8333 21 30V26.5H24.5V28.5C24 28.5 22.8 28.6 22 29Z" fill={color} />

25
src/views/ChatPanel/InputMessage.tsx
View File

@ -4,9 +4,8 @@ import { IconGitBranch, IconBook, IconX, IconSquareRoundedPlus, IconSend } from
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { IconGitBranchChecked, IconShellCommand, IconMouseRightClick } from "./Icons"; import { IconGitBranchChecked, IconShellCommand, IconMouseRightClick } from "./Icons";
import messageUtil from '../../util/MessageUtil'; import messageUtil from '../../util/MessageUtil';
import { useAppDispatch, useAppSelector } from '../hooks';
import { useSelector, useDispatch } from 'react-redux';
import { import {
setValue, setValue,
selectValue, selectValue,
@ -28,8 +27,8 @@ import {
} from './chatSlice'; } from './chatSlice';
const InputContexts = () => { const InputContexts = () => {
const dispatch = useDispatch(); const dispatch = useAppDispatch();
const contexts = useSelector(selectContexts); const contexts = useAppSelector(selectContexts);
return (<Accordion variant="contained" chevronPosition="left" return (<Accordion variant="contained" chevronPosition="left"
sx={{ sx={{
backgroundColor: 'var(--vscode-menu-background)', backgroundColor: 'var(--vscode-menu-background)',
@ -77,7 +76,7 @@ const InputContexts = () => {
contexts.map((item: any, index: number) => { contexts.map((item: any, index: number) => {
const { context } = item; const { context } = item;
return ( return (
<Accordion.Item value={`item-${index}`} > <Accordion.Item key={`item-${index}`} value={`item-value-${index}`} >
<Box sx={{ <Box sx={{
display: 'flex', alignItems: 'center', display: 'flex', alignItems: 'center',
backgroundColor: 'var(--vscode-menu-background)', backgroundColor: 'var(--vscode-menu-background)',
@ -121,13 +120,13 @@ const InputContexts = () => {
const InputMessage = (props: any) => { const InputMessage = (props: any) => {
const { width } = props; const { width } = props;
const dispatch = useDispatch(); const dispatch = useAppDispatch();
const input = useSelector(selectValue); const input = useAppSelector(selectValue);
const generating = useSelector(selectGenerating); const generating = useAppSelector(selectGenerating);
const contexts = useSelector(selectContexts); const contexts = useAppSelector(selectContexts);
const menuOpend = useSelector(selectMenuOpend); const menuOpend = useAppSelector(selectMenuOpend);
const menuType = useSelector(selectMenuType); const menuType = useAppSelector(selectMenuType);
const currentMenuIndex = useSelector(selectCurrentMenuIndex); const currentMenuIndex = useAppSelector(selectCurrentMenuIndex);
const theme = useMantineTheme(); const theme = useMantineTheme();
const [commandMenus, commandMenusHandlers] = 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 [contextMenus, contextMenusHandlers] = useListState<{ pattern: string; description: string; name: string }>([]);
@ -247,6 +246,7 @@ const InputMessage = (props: any) => {
.map(({ pattern, description, name }, index) => { .map(({ pattern, description, name }, index) => {
return ( return (
<Flex <Flex
key={`contexts-menus-${index}`}
mih={40} mih={40}
gap="md" gap="md"
justify="flex-start" justify="flex-start"
@ -350,6 +350,7 @@ const InputMessage = (props: any) => {
const node = filtered.map(({ pattern, description, name }, index) => { const node = filtered.map(({ pattern, description, name }, index) => {
return ( return (
<Flex <Flex
key={`command-menus-${index}`}
mih={40} mih={40}
gap="md" gap="md"
justify="flex-start" justify="flex-start"

57
src/views/ChatPanel/MessageContainer.tsx
View File

@ -9,7 +9,7 @@ import SvgAvatarDevChat from './avatar_devchat.svg';
import SvgAvatarUser from './avatar_spaceman.png'; import SvgAvatarUser from './avatar_spaceman.png';
import { IconCheck, IconCopy } from "@tabler/icons-react"; import { IconCheck, IconCopy } from "@tabler/icons-react";
import { useDispatch, useSelector } from 'react-redux'; import { useAppDispatch, useAppSelector } from '../hooks';
import { import {
selectGenerating, selectGenerating,
selectResponsed, selectResponsed,
@ -24,8 +24,8 @@ import {
const MessageBlink = (props: any) => { const MessageBlink = (props: any) => {
const { messageType, lastMessage } = props; const { messageType, lastMessage } = props;
const generating = useSelector(selectGenerating); const generating = useAppSelector(selectGenerating);
const responsed = useSelector(selectResponsed); const responsed = useAppSelector(selectResponsed);
const blink = keyframes({ const blink = keyframes({
'50%': { opacity: 0 }, '50%': { opacity: 0 },
@ -95,7 +95,7 @@ const MessageContext = (props: any) => {
contexts?.map((item: any, index: number) => { contexts?.map((item: any, index: number) => {
const { context } = item; const { context } = item;
return ( return (
<Accordion.Item value={`item-${index}`} mah='200'> <Accordion.Item key={`item-${index}`} value={`item-value-${index}`} mah='200'>
<Box sx={{ display: 'flex', alignItems: 'center' }}> <Box sx={{ display: 'flex', alignItems: 'center' }}>
<Accordion.Control > <Accordion.Control >
<Text truncate='end'>{'command' in context ? context.command : context.path}</Text> <Text truncate='end'>{'command' in context ? context.command : context.path}</Text>
@ -125,7 +125,7 @@ const DefaultMessage = (<Center>
const MessageHeader = (props: any) => { const MessageHeader = (props: any) => {
const { type, message, contexts } = props; const { type, message, contexts } = props;
const dispatch = useDispatch(); const dispatch = useAppDispatch();
const [refilled, setRefilled] = React.useState(false); const [refilled, setRefilled] = React.useState(false);
return (<Flex return (<Flex
m='10px 0 10px 0' m='10px 0 10px 0'
@ -168,13 +168,13 @@ const MessageHeader = (props: any) => {
const MessageContainer = (props: any) => { const MessageContainer = (props: any) => {
const { width } = props; const { width } = props;
const messages = useSelector(selectMessages); const messages = useAppSelector(selectMessages);
const messageList = messages.map((item: any, index: number) => { return (messages.length > 0
const { message: messageText, type: messageType, contexts } = item; ? messages.map((item: any, index: number) => {
// setMessage(messageText); const { message: messageText, type: messageType, contexts } = item;
return (<> // setMessage(messageText);
<Stack return <Stack
spacing={0} spacing={0}
key={`message-${index}`} key={`message-${index}`}
sx={{ sx={{
@ -183,27 +183,28 @@ const MessageContainer = (props: any) => {
margin: 0, margin: 0,
}}> }}>
<MessageHeader <MessageHeader
key={`message-header-${index}`}
type={messageType} type={messageType}
message={messageText} message={messageText}
contexts={contexts} /> contexts={contexts} />
<Container sx={{ <Container
margin: 0, key={`message-container-${index}`}
padding: 0, sx={{
width: width, margin: 0,
pre: { padding: 0,
whiteSpace: 'break-spaces' width: width,
}, pre: {
}}> whiteSpace: 'break-spaces'
<MessageContext contexts={contexts} /> },
<CodeBlock messageText={messageText} /> }}>
<MessageBlink messageType={messageType} lastMessage={index === messages.length - 1} /> <MessageContext key={`message-context-${index}`} contexts={contexts} />
<CodeBlock key={`message-codeblock-${index}`} messageText={messageText} />
<MessageBlink key={`message-blink-${index}`} messageType={messageType} lastMessage={index === messages.length - 1} />
</Container > </Container >
</Stack > {index !== messages.length - 1 && <Divider my={3} key={`message-divider-${index}`} />}
{index !== messages.length - 1 && <Divider my={3} />} </Stack >;
</>); })
}); : DefaultMessage);
return (messageList.length > 0 ? messageList : DefaultMessage);
}; };
export default MessageContainer; export default MessageContainer;

11
src/views/ChatPanel/chatSlice.ts
View File

@ -1,5 +1,6 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import messageUtil from '../../util/MessageUtil'; import messageUtil from '../../util/MessageUtil';
import type { RootState } from '../store';
export const chatSlice = createSlice({ export const chatSlice = createSlice({
name: 'chat', name: 'chat',
@ -63,11 +64,11 @@ export const chatSlice = createSlice({
} }
}); });
export const selectGenerating = state => state.chat.generating; export const selectGenerating = (state: RootState) => state.chat.generating;
export const selectResponsed = state => state.chat.responsed; export const selectResponsed = (state: RootState) => state.chat.responsed;
export const selectCurrentMessage = state => state.chat.currentMessage; export const selectCurrentMessage = (state: RootState) => state.chat.currentMessage;
export const selectErrorMessage = state => state.chat.errorMessage; export const selectErrorMessage = (state: RootState) => state.chat.errorMessage;
export const selectMessages = state => state.chat.messages; export const selectMessages = (state: RootState) => state.chat.messages;
export const { export const {
startGenerating, startGenerating,

20
src/views/ChatPanel/index.tsx
View File

@ -6,8 +6,8 @@ import { Button } from '@mantine/core';
import { useListState, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks'; import { useListState, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
import { IconPlayerStop, IconRotateDot } from '@tabler/icons-react'; import { IconPlayerStop, IconRotateDot } from '@tabler/icons-react';
import messageUtil from '../../util/MessageUtil'; import messageUtil from '../../util/MessageUtil';
import { useAppDispatch, useAppSelector } from '../hooks';
import { useSelector, useDispatch } from 'react-redux';
import { import {
setValue setValue
} from './inputSlice'; } from './inputSlice';
@ -29,7 +29,7 @@ import InputMessage from './InputMessage';
import MessageContainer from './MessageContainer'; import MessageContainer from './MessageContainer';
const RegenerationButton = () => { const RegenerationButton = () => {
const dispatch = useDispatch(); const dispatch = useAppDispatch();
return (<Button return (<Button
size='xs' size='xs'
leftIcon={<IconRotateDot color='var(--vscode-button-foreground)' />} leftIcon={<IconRotateDot color='var(--vscode-button-foreground)' />}
@ -52,7 +52,7 @@ const RegenerationButton = () => {
}; };
const StopButton = () => { const StopButton = () => {
const dispatch = useDispatch(); const dispatch = useAppDispatch();
return ( return (
<Button <Button
size='xs' size='xs'
@ -76,11 +76,11 @@ const StopButton = () => {
}; };
const chatPanel = () => { const chatPanel = () => {
const dispatch = useDispatch(); const dispatch = useAppDispatch();
const generating = useSelector(selectGenerating); const generating = useAppSelector(selectGenerating);
const currentMessage = useSelector(selectCurrentMessage); const currentMessage = useAppSelector(selectCurrentMessage);
const errorMessage = useSelector(selectErrorMessage); const errorMessage = useAppSelector(selectErrorMessage);
const messages = useSelector(selectMessages); const messages = useAppSelector(selectMessages);
const [chatContainerRef, chatContainerRect] = useResizeObserver(); const [chatContainerRef, chatContainerRect] = useResizeObserver();
const scrollViewport = useRef<HTMLDivElement>(null); const scrollViewport = useRef<HTMLDivElement>(null);
const { height, width } = useViewportSize(); const { height, width } = useViewportSize();
@ -114,7 +114,7 @@ const chatPanel = () => {
messageUtil.registerHandler('loadHistoryMessages', (message: { command: string; entries: [{ hash: '', user: '', date: '', request: '', response: '', context: [{ content: '', role: '' }] }] }) => { messageUtil.registerHandler('loadHistoryMessages', (message: { command: string; entries: [{ hash: '', user: '', date: '', request: '', response: '', context: [{ content: '', role: '' }] }] }) => {
message.entries?.forEach(({ hash, user, date, request, response, context }, index) => { message.entries?.forEach(({ hash, user, date, request, response, context }, index) => {
if (index < message.entries.length - messageCount) return; if (index < message.entries.length - messageCount) return;
const contexts = context.map(({ content, role }) => ({ context: JSON.parse(content) })); const contexts = context?.map(({ content, role }) => ({ context: JSON.parse(content) }));
dispatch(newMessage({ type: 'user', message: request, contexts: contexts })); dispatch(newMessage({ type: 'user', message: request, contexts: contexts }));
dispatch(newMessage({ type: 'bot', message: response })); dispatch(newMessage({ type: 'bot', message: response }));
}); });
@ -167,7 +167,6 @@ const chatPanel = () => {
return ( return (
<Container <Container
id='chat-container'
ref={chatContainerRef} ref={chatContainerRef}
sx={{ sx={{
height: '100%', height: '100%',
@ -178,7 +177,6 @@ const chatPanel = () => {
minWidth: 240 minWidth: 240
}}> }}>
<ScrollArea <ScrollArea
id='chat-scroll-area'
type="never" type="never"
sx={{ sx={{
height: generating ? height - px('8rem') : height - px('5rem'), height: generating ? height - px('8rem') : height - px('5rem'),

11
src/views/ChatPanel/inputSlice.ts
View File

@ -1,4 +1,5 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from '../store';
export const inputSlice = createSlice({ export const inputSlice = createSlice({
name: 'input', name: 'input',
@ -39,11 +40,11 @@ export const inputSlice = createSlice({
} }
}); });
export const selectValue = state => state.input.value; export const selectValue = (state: RootState) => state.input.value;
export const selectContexts = state => state.input.contexts; export const selectContexts = (state: RootState) => state.input.contexts;
export const selectMenuOpend = state => state.input.menuOpend; export const selectMenuOpend = (state: RootState) => state.input.menuOpend;
export const selectMenuType = state => state.input.menuType; export const selectMenuType = (state: RootState) => state.input.menuType;
export const selectCurrentMenuIndex = state => state.input.currentMenuIndex; export const selectCurrentMenuIndex = (state: RootState) => state.input.currentMenuIndex;
export const { export const {
setValue, setValue,

5
src/views/hooks.ts Normal file
View File

@ -0,0 +1,5 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './store';
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

7
src/views/store.ts
View File

@ -2,9 +2,12 @@ import { configureStore } from '@reduxjs/toolkit';
import inputReducer from './ChatPanel/inputSlice'; import inputReducer from './ChatPanel/inputSlice';
import chatReducer from './ChatPanel/chatSlice'; import chatReducer from './ChatPanel/chatSlice';
export default configureStore({ export const store = configureStore({
reducer: { reducer: {
input: inputReducer, input: inputReducer,
chat: chatReducer chat: chatReducer
} }
}); });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;