diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index 9898a33..e618585 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -1,4 +1,4 @@
-import { IconArrowDown, IconClearAll, IconSettings } from '@tabler/icons-react';
+import { IconClearAll, IconSettings } from '@tabler/icons-react';
import {
MutableRefObject,
memo,
@@ -467,6 +467,11 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
key={index}
message={message}
messageIndex={index}
+ onEdit={(editedMessage) => {
+ setCurrentMessage(editedMessage);
+ // discard edited message and the ones that come after then resend
+ handleSend(editedMessage, selectedConversation?.messages.length - index);
+ }}
/>
))}
@@ -487,24 +492,16 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
setCurrentMessage(message);
handleSend(message, 0, plugin);
}}
+ onScrollDownClick={handleScrollDown}
onRegenerate={() => {
if (currentMessage) {
handleSend(currentMessage, 2, null);
}
}}
+ showScrollDownButton={showScrollDownButton}
/>
)}
- {showScrollDownButton && (
-
-
-
- )}
);
});
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index e286573..729702b 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -1,4 +1,5 @@
import {
+ IconArrowDown,
IconBolt,
IconBrandGoogle,
IconPlayerStop,
@@ -30,15 +31,19 @@ import { VariableModal } from './VariableModal';
interface Props {
onSend: (message: Message, plugin: Plugin | null) => void;
onRegenerate: () => void;
+ onScrollDownClick: () => void;
stopConversationRef: MutableRefObject;
textareaRef: MutableRefObject;
+ showScrollDownButton: boolean;
}
export const ChatInput = ({
onSend,
onRegenerate,
+ onScrollDownClick,
stopConversationRef,
textareaRef,
+ showScrollDownButton
}: Props) => {
const { t } = useTranslation('chat');
@@ -341,6 +346,17 @@ export const ChatInput = ({
)}
+ {showScrollDownButton && (
+
+
+
+ )}
+
{showPromptList && filteredPrompts.length > 0 && (
void
}
-export const ChatMessage: FC = memo(({ message, messageIndex }) => {
+export const ChatMessage: FC = memo(({ message, messageIndex, onEdit }) => {
const { t } = useTranslation('chat');
const {
@@ -57,31 +58,8 @@ export const ChatMessage: FC = memo(({ message, messageIndex }) => {
const handleEditMessage = () => {
if (message.content != messageContent) {
- if (selectedConversation) {
- const updatedMessages = selectedConversation.messages
- .map((m, i) => {
- if (i < messageIndex) {
- return m;
- }
- })
- .filter((m) => m) as Message[];
-
- const updatedConversation = {
- ...selectedConversation,
- messages: updatedMessages,
- };
-
- const { single, all } = updateConversation(
- updatedConversation,
- conversations,
- );
-
- homeDispatch({ field: 'selectedConversation', value: single });
- homeDispatch({ field: 'conversations', value: all });
- homeDispatch({
- field: 'currentMessage',
- value: { ...message, content: messageContent },
- });
+ if (selectedConversation && onEdit) {
+ onEdit({ ...message, content: messageContent });
}
}
setIsEditing(false);
diff --git a/components/Chat/Temperature.tsx b/components/Chat/Temperature.tsx
index a1085b2..e4ebd28 100644
--- a/components/Chat/Temperature.tsx
+++ b/components/Chat/Temperature.tsx
@@ -1,9 +1,11 @@
-import { FC, useState } from 'react';
+import { FC, useContext, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { DEFAULT_TEMPERATURE } from '@/utils/app/const';
+import HomeContext from '@/pages/api/home/home.context';
+
interface Props {
label: string;
onChangeTemperature: (temperature: number) => void;
@@ -13,7 +15,13 @@ export const TemperatureSlider: FC = ({
label,
onChangeTemperature,
}) => {
- const [temperature, setTemperature] = useState(DEFAULT_TEMPERATURE);
+ const {
+ state: { conversations },
+ } = useContext(HomeContext);
+ const lastConversation = conversations[conversations.length - 1];
+ const [temperature, setTemperature] = useState(
+ lastConversation?.temperature ?? DEFAULT_TEMPERATURE,
+ );
const { t } = useTranslation('chat');
const handleChange = (event: React.ChangeEvent) => {
const newValue = parseFloat(event.target.value);
@@ -31,7 +39,9 @@ export const TemperatureSlider: FC = ({
'Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.',
)}
- {temperature.toFixed(1)}
+
+ {temperature.toFixed(1)}
+
= ({
value={temperature}
onChange={handleChange}
/>
-
+
-
{t('Precise')}
diff --git a/components/Chatbar/components/ChatbarSettings.tsx b/components/Chatbar/components/ChatbarSettings.tsx
index de85399..1ca84a6 100644
--- a/components/Chatbar/components/ChatbarSettings.tsx
+++ b/components/Chatbar/components/ChatbarSettings.tsx
@@ -1,10 +1,17 @@
-import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
-import { useContext } from 'react';
+import {
+ IconFileExport,
+ IconMoon,
+ IconSettings,
+ IconSun,
+} from '@tabler/icons-react';
+import { useContext, useState } from 'react';
import { useTranslation } from 'next-i18next';
import HomeContext from '@/pages/api/home/home.context';
+import { SettingDialog } from '@/components/Settings/SettingDialog';
+
import { Import } from '../../Settings/Import';
import { Key } from '../../Settings/Key';
import { SidebarButton } from '../../Sidebar/SidebarButton';
@@ -14,6 +21,7 @@ import { PluginKeys } from './PluginKeys';
export const ChatbarSettings = () => {
const { t } = useTranslation('sidebar');
+ const [isSettingDialogOpen, setIsSettingDialog] = useState(false);
const {
state: {
@@ -49,16 +57,9 @@ export const ChatbarSettings = () => {
/>
:
- }
- onClick={() =>
- homeDispatch({
- field: 'lightMode',
- value: lightMode === 'light' ? 'dark' : 'light',
- })
- }
+ text={t('Settings')}
+ icon={}
+ onClick={() => setIsSettingDialog(true)}
/>
{!serverSideApiKeyIsSet ? (
@@ -66,6 +67,13 @@ export const ChatbarSettings = () => {
) : null}
{!serverSidePluginKeysSet ? : null}
+
+ {
+ setIsSettingDialog(false);
+ }}
+ />
);
};
diff --git a/components/Settings/SettingDialog.tsx b/components/Settings/SettingDialog.tsx
new file mode 100644
index 0000000..004a9cf
--- /dev/null
+++ b/components/Settings/SettingDialog.tsx
@@ -0,0 +1,105 @@
+import { FC, useContext, useEffect, useReducer, useRef } from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+import { useCreateReducer } from '@/hooks/useCreateReducer';
+
+import { getSettings, saveSettings } from '@/utils/app/settings';
+
+import { Settings } from '@/types/settings';
+
+import HomeContext from '@/pages/api/home/home.context';
+
+interface Props {
+ open: boolean;
+ onClose: () => void;
+}
+
+export const SettingDialog: FC = ({ open, onClose }) => {
+ const { t } = useTranslation('settings');
+ const settings: Settings = getSettings();
+ const { state, dispatch } = useCreateReducer({
+ initialState: settings,
+ });
+ const { dispatch: homeDispatch } = useContext(HomeContext);
+ const modalRef = useRef(null);
+
+ useEffect(() => {
+ const handleMouseDown = (e: MouseEvent) => {
+ if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+ window.addEventListener('mouseup', handleMouseUp);
+ }
+ };
+
+ const handleMouseUp = (e: MouseEvent) => {
+ window.removeEventListener('mouseup', handleMouseUp);
+ onClose();
+ };
+
+ window.addEventListener('mousedown', handleMouseDown);
+
+ return () => {
+ window.removeEventListener('mousedown', handleMouseDown);
+ };
+ }, [onClose]);
+
+ const handleSave = () => {
+ homeDispatch({ field: 'lightMode', value: state.theme });
+ saveSettings(state);
+ };
+
+ // Render nothing if the dialog is not open.
+ if (!open) {
+ return <>;
+ }
+
+ // Render the dialog.
+ return (
+
+
+
+
+
+
+
+ {t('Settings')}
+
+
+
+ {t('Theme')}
+
+
+
+
+
+
+
+
+