Merge pull request #174 from covespace/fix-hello-load-error
Fix hello load error
This commit is contained in:
Rankin Zheng
GitHub
commit
c16d7e1404
@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import App from './views/App';
|
||||
import store from './views/store';
|
||||
import { store } from './views/store';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
const container = document.getElementById('app')!;
|
||||
|
||||
@ -9,8 +9,8 @@ export interface TablerIconsProps extends Partial<Omit<React.SVGProps<SVGSVGElem
|
||||
export const IconMouseRightClick = (props: TablerIconsProps) => {
|
||||
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">
|
||||
<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="M7 15H29.5" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<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} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<rect x="18" y="4" width="11" height="10" fill={color} />
|
||||
</svg>);
|
||||
};
|
||||
@ -19,12 +19,12 @@ export const IconMouseRightClick = (props: TablerIconsProps) => {
|
||||
export const IconGitBranchChecked = (props: TablerIconsProps) => {
|
||||
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">
|
||||
<path d="M9 12L9 24" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="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 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="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 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="M21 28L25.5 32.5L34 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} 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} 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} 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} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21 28L25.5 32.5L34 24" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>);
|
||||
};
|
||||
|
||||
@ -32,21 +32,21 @@ export const IconGitBranchChecked = (props: TablerIconsProps) => {
|
||||
export const IconGitBranch = (props: TablerIconsProps) => {
|
||||
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">
|
||||
<path d="M9 12L9 24" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="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 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="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 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 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} 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} 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} 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} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>);
|
||||
};
|
||||
|
||||
export const IconShellCommand = (props: TablerIconsProps) => {
|
||||
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">
|
||||
<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="M12 24L15 21L12 18" stroke={color} stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M5.5 11H31" stroke={color} stroke-width="3" />
|
||||
<path d="M20 24L24 24" stroke={color} stroke-width="3" stroke-linecap="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} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M5.5 11H31" stroke={color} strokeWidth="3" />
|
||||
<path d="M20 24L24 24" stroke={color} strokeWidth="3" strokeLinecap="round" />
|
||||
</svg>);
|
||||
};
|
||||
|
||||
@ -54,14 +54,14 @@ export const IconShellCommand = (props: TablerIconsProps) => {
|
||||
export const IconBook = (props: TablerIconsProps) => {
|
||||
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">
|
||||
<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="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="M8 11L13 11" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M23 11L28 11" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M8 16L13 16" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M23 16L28 16" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M8 21L13 21" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M23 21L28 21" stroke={color} stroke-width="2" stroke-linecap="round" 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} strokeWidth="3" strokeLinejoin="round" />
|
||||
<path d="M8 11L13 11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M23 11L28 11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8 16L13 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M23 16L28 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8 21L13 21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="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} />
|
||||
<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} />
|
||||
|
||||
@ -4,9 +4,8 @@ import { IconGitBranch, IconBook, IconX, IconSquareRoundedPlus, IconSend } from
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { IconGitBranchChecked, IconShellCommand, IconMouseRightClick } from "./Icons";
|
||||
import messageUtil from '../../util/MessageUtil';
|
||||
import { useAppDispatch, useAppSelector } from '../hooks';
|
||||
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
setValue,
|
||||
selectValue,
|
||||
@ -28,8 +27,8 @@ import {
|
||||
} from './chatSlice';
|
||||
|
||||
const InputContexts = () => {
|
||||
const dispatch = useDispatch();
|
||||
const contexts = useSelector(selectContexts);
|
||||
const dispatch = useAppDispatch();
|
||||
const contexts = useAppSelector(selectContexts);
|
||||
return (<Accordion variant="contained" chevronPosition="left"
|
||||
sx={{
|
||||
backgroundColor: 'var(--vscode-menu-background)',
|
||||
@ -77,7 +76,7 @@ const InputContexts = () => {
|
||||
contexts.map((item: any, index: number) => {
|
||||
const { context } = item;
|
||||
return (
|
||||
<Accordion.Item value={`item-${index}`} >
|
||||
<Accordion.Item key={`item-${index}`} value={`item-value-${index}`} >
|
||||
<Box sx={{
|
||||
display: 'flex', alignItems: 'center',
|
||||
backgroundColor: 'var(--vscode-menu-background)',
|
||||
@ -121,13 +120,13 @@ const InputContexts = () => {
|
||||
const InputMessage = (props: any) => {
|
||||
const { width } = props;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const input = useSelector(selectValue);
|
||||
const generating = useSelector(selectGenerating);
|
||||
const contexts = useSelector(selectContexts);
|
||||
const menuOpend = useSelector(selectMenuOpend);
|
||||
const menuType = useSelector(selectMenuType);
|
||||
const currentMenuIndex = useSelector(selectCurrentMenuIndex);
|
||||
const dispatch = useAppDispatch();
|
||||
const input = useAppSelector(selectValue);
|
||||
const generating = useAppSelector(selectGenerating);
|
||||
const contexts = useAppSelector(selectContexts);
|
||||
const menuOpend = useAppSelector(selectMenuOpend);
|
||||
const menuType = useAppSelector(selectMenuType);
|
||||
const currentMenuIndex = useAppSelector(selectCurrentMenuIndex);
|
||||
const theme = useMantineTheme();
|
||||
const [commandMenus, commandMenusHandlers] = 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) => {
|
||||
return (
|
||||
<Flex
|
||||
key={`contexts-menus-${index}`}
|
||||
mih={40}
|
||||
gap="md"
|
||||
justify="flex-start"
|
||||
@ -350,6 +350,7 @@ const InputMessage = (props: any) => {
|
||||
const node = filtered.map(({ pattern, description, name }, index) => {
|
||||
return (
|
||||
<Flex
|
||||
key={`command-menus-${index}`}
|
||||
mih={40}
|
||||
gap="md"
|
||||
justify="flex-start"
|
||||
|
||||
@ -9,7 +9,7 @@ import SvgAvatarDevChat from './avatar_devchat.svg';
|
||||
import SvgAvatarUser from './avatar_spaceman.png';
|
||||
import { IconCheck, IconCopy } from "@tabler/icons-react";
|
||||
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useAppDispatch, useAppSelector } from '../hooks';
|
||||
import {
|
||||
selectGenerating,
|
||||
selectResponsed,
|
||||
@ -24,8 +24,8 @@ import {
|
||||
const MessageBlink = (props: any) => {
|
||||
const { messageType, lastMessage } = props;
|
||||
|
||||
const generating = useSelector(selectGenerating);
|
||||
const responsed = useSelector(selectResponsed);
|
||||
const generating = useAppSelector(selectGenerating);
|
||||
const responsed = useAppSelector(selectResponsed);
|
||||
|
||||
const blink = keyframes({
|
||||
'50%': { opacity: 0 },
|
||||
@ -95,7 +95,7 @@ const MessageContext = (props: any) => {
|
||||
contexts?.map((item: any, index: number) => {
|
||||
const { context } = item;
|
||||
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' }}>
|
||||
<Accordion.Control >
|
||||
<Text truncate='end'>{'command' in context ? context.command : context.path}</Text>
|
||||
@ -125,7 +125,7 @@ const DefaultMessage = (<Center>
|
||||
|
||||
const MessageHeader = (props: any) => {
|
||||
const { type, message, contexts } = props;
|
||||
const dispatch = useDispatch();
|
||||
const dispatch = useAppDispatch();
|
||||
const [refilled, setRefilled] = React.useState(false);
|
||||
return (<Flex
|
||||
m='10px 0 10px 0'
|
||||
@ -168,13 +168,13 @@ const MessageHeader = (props: any) => {
|
||||
const MessageContainer = (props: any) => {
|
||||
const { width } = props;
|
||||
|
||||
const messages = useSelector(selectMessages);
|
||||
const messages = useAppSelector(selectMessages);
|
||||
|
||||
const messageList = messages.map((item: any, index: number) => {
|
||||
const { message: messageText, type: messageType, contexts } = item;
|
||||
// setMessage(messageText);
|
||||
return (<>
|
||||
<Stack
|
||||
return (messages.length > 0
|
||||
? messages.map((item: any, index: number) => {
|
||||
const { message: messageText, type: messageType, contexts } = item;
|
||||
// setMessage(messageText);
|
||||
return <Stack
|
||||
spacing={0}
|
||||
key={`message-${index}`}
|
||||
sx={{
|
||||
@ -183,27 +183,28 @@ const MessageContainer = (props: any) => {
|
||||
margin: 0,
|
||||
}}>
|
||||
<MessageHeader
|
||||
key={`message-header-${index}`}
|
||||
type={messageType}
|
||||
message={messageText}
|
||||
contexts={contexts} />
|
||||
<Container sx={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
width: width,
|
||||
pre: {
|
||||
whiteSpace: 'break-spaces'
|
||||
},
|
||||
}}>
|
||||
<MessageContext contexts={contexts} />
|
||||
<CodeBlock messageText={messageText} />
|
||||
<MessageBlink messageType={messageType} lastMessage={index === messages.length - 1} />
|
||||
<Container
|
||||
key={`message-container-${index}`}
|
||||
sx={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
width: width,
|
||||
pre: {
|
||||
whiteSpace: 'break-spaces'
|
||||
},
|
||||
}}>
|
||||
<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 >
|
||||
</Stack >
|
||||
{index !== messages.length - 1 && <Divider my={3} />}
|
||||
</>);
|
||||
});
|
||||
|
||||
return (messageList.length > 0 ? messageList : DefaultMessage);
|
||||
{index !== messages.length - 1 && <Divider my={3} key={`message-divider-${index}`} />}
|
||||
</Stack >;
|
||||
})
|
||||
: DefaultMessage);
|
||||
};
|
||||
|
||||
export default MessageContainer;
|
||||
@ -1,5 +1,6 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
import messageUtil from '../../util/MessageUtil';
|
||||
import type { RootState } from '../store';
|
||||
|
||||
export const chatSlice = createSlice({
|
||||
name: 'chat',
|
||||
@ -63,11 +64,11 @@ export const chatSlice = createSlice({
|
||||
}
|
||||
});
|
||||
|
||||
export const selectGenerating = state => state.chat.generating;
|
||||
export const selectResponsed = state => state.chat.responsed;
|
||||
export const selectCurrentMessage = state => state.chat.currentMessage;
|
||||
export const selectErrorMessage = state => state.chat.errorMessage;
|
||||
export const selectMessages = state => state.chat.messages;
|
||||
export const selectGenerating = (state: RootState) => state.chat.generating;
|
||||
export const selectResponsed = (state: RootState) => state.chat.responsed;
|
||||
export const selectCurrentMessage = (state: RootState) => state.chat.currentMessage;
|
||||
export const selectErrorMessage = (state: RootState) => state.chat.errorMessage;
|
||||
export const selectMessages = (state: RootState) => state.chat.messages;
|
||||
|
||||
export const {
|
||||
startGenerating,
|
||||
|
||||
@ -6,8 +6,8 @@ import { Button } from '@mantine/core';
|
||||
import { useListState, useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
|
||||
import { IconPlayerStop, IconRotateDot } from '@tabler/icons-react';
|
||||
import messageUtil from '../../util/MessageUtil';
|
||||
import { useAppDispatch, useAppSelector } from '../hooks';
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
setValue
|
||||
} from './inputSlice';
|
||||
@ -29,7 +29,7 @@ import InputMessage from './InputMessage';
|
||||
import MessageContainer from './MessageContainer';
|
||||
|
||||
const RegenerationButton = () => {
|
||||
const dispatch = useDispatch();
|
||||
const dispatch = useAppDispatch();
|
||||
return (<Button
|
||||
size='xs'
|
||||
leftIcon={<IconRotateDot color='var(--vscode-button-foreground)' />}
|
||||
@ -52,7 +52,7 @@ const RegenerationButton = () => {
|
||||
};
|
||||
|
||||
const StopButton = () => {
|
||||
const dispatch = useDispatch();
|
||||
const dispatch = useAppDispatch();
|
||||
return (
|
||||
<Button
|
||||
size='xs'
|
||||
@ -76,11 +76,11 @@ const StopButton = () => {
|
||||
};
|
||||
|
||||
const chatPanel = () => {
|
||||
const dispatch = useDispatch();
|
||||
const generating = useSelector(selectGenerating);
|
||||
const currentMessage = useSelector(selectCurrentMessage);
|
||||
const errorMessage = useSelector(selectErrorMessage);
|
||||
const messages = useSelector(selectMessages);
|
||||
const dispatch = useAppDispatch();
|
||||
const generating = useAppSelector(selectGenerating);
|
||||
const currentMessage = useAppSelector(selectCurrentMessage);
|
||||
const errorMessage = useAppSelector(selectErrorMessage);
|
||||
const messages = useAppSelector(selectMessages);
|
||||
const [chatContainerRef, chatContainerRect] = useResizeObserver();
|
||||
const scrollViewport = useRef<HTMLDivElement>(null);
|
||||
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: '' }] }] }) => {
|
||||
message.entries?.forEach(({ hash, user, date, request, response, context }, index) => {
|
||||
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: 'bot', message: response }));
|
||||
});
|
||||
@ -167,7 +167,6 @@ const chatPanel = () => {
|
||||
|
||||
return (
|
||||
<Container
|
||||
id='chat-container'
|
||||
ref={chatContainerRef}
|
||||
sx={{
|
||||
height: '100%',
|
||||
@ -178,7 +177,6 @@ const chatPanel = () => {
|
||||
minWidth: 240
|
||||
}}>
|
||||
<ScrollArea
|
||||
id='chat-scroll-area'
|
||||
type="never"
|
||||
sx={{
|
||||
height: generating ? height - px('8rem') : height - px('5rem'),
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
import type { RootState } from '../store';
|
||||
|
||||
export const inputSlice = createSlice({
|
||||
name: 'input',
|
||||
@ -39,11 +40,11 @@ export const inputSlice = createSlice({
|
||||
}
|
||||
});
|
||||
|
||||
export const selectValue = state => state.input.value;
|
||||
export const selectContexts = state => state.input.contexts;
|
||||
export const selectMenuOpend = state => state.input.menuOpend;
|
||||
export const selectMenuType = state => state.input.menuType;
|
||||
export const selectCurrentMenuIndex = state => state.input.currentMenuIndex;
|
||||
export const selectValue = (state: RootState) => state.input.value;
|
||||
export const selectContexts = (state: RootState) => state.input.contexts;
|
||||
export const selectMenuOpend = (state: RootState) => state.input.menuOpend;
|
||||
export const selectMenuType = (state: RootState) => state.input.menuType;
|
||||
export const selectCurrentMenuIndex = (state: RootState) => state.input.currentMenuIndex;
|
||||
|
||||
export const {
|
||||
setValue,
|
||||
|
||||
5
src/views/hooks.ts
Normal file
5
src/views/hooks.ts
Normal 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;
|
||||
@ -2,9 +2,12 @@ import { configureStore } from '@reduxjs/toolkit';
|
||||
import inputReducer from './ChatPanel/inputSlice';
|
||||
import chatReducer from './ChatPanel/chatSlice';
|
||||
|
||||
export default configureStore({
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
input: inputReducer,
|
||||
chat: chatReducer
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
Loading…
x
Reference in New Issue
Block a user