mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-14 14:38:51 +01:00
refactor: basic message and send message. as well as model
THIS IS NOT FINISHED. DONT USE THIS
This commit is contained in:
Wentao Lyu
parent
de8f519742
commit
c7c30d8bb5
24 changed files with 1057 additions and 1035 deletions
30
client/src/components/Input/AdjustToneButton.jsx
Normal file
30
client/src/components/Input/AdjustToneButton.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
export default function AdjustButton({ onClick }) {
|
||||
const clickHandler = (e) => {
|
||||
e.preventDefault();
|
||||
onClick();
|
||||
};
|
||||
return (
|
||||
<button
|
||||
onClick={clickHandler}
|
||||
className="group absolute bottom-11 md:bottom-0 -right-11 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
|
||||
>
|
||||
<div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
height="1em"
|
||||
width="1em"
|
||||
strokeWidth="2"
|
||||
stroke="currentColor"
|
||||
className="mr-1 h-4 w-4">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
67
client/src/components/Input/BingStyles.jsx
Normal file
67
client/src/components/Input/BingStyles.jsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import React, { useState, useEffect, forwardRef } from 'react';
|
||||
import { Tabs, TabsList, TabsTrigger } from '../ui/Tabs.tsx';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { setConversation } from '~/store/convoSlice';
|
||||
|
||||
function BingStyles(props, ref) {
|
||||
const dispatch = useDispatch();
|
||||
const [value, setValue] = useState('fast');
|
||||
const { model } = useSelector((state) => state.submit);
|
||||
const { conversationId } = useSelector((state) => state.convo);
|
||||
const { messages } = useSelector((state) => state.messages);
|
||||
|
||||
const isBing = model === 'bingai' || model === 'sydney';
|
||||
useEffect(() => {
|
||||
if (model === 'bingai' && !conversationId || model === 'sydney') {
|
||||
dispatch(setConversation({ toneStyle: value }));
|
||||
}
|
||||
}, [conversationId, model, value, dispatch]);
|
||||
|
||||
const show = isBing && ((!conversationId || messages?.length === 0) || props.show);
|
||||
const defaultClasses = 'p-2 rounded-md font-normal bg-white/[.60] dark:bg-gray-700 text-black';
|
||||
const defaultSelected = defaultClasses + 'font-medium data-[state=active]:text-white';
|
||||
|
||||
const selectedClass = (val) => val + '-tab ' + defaultSelected;
|
||||
|
||||
const changeHandler = value => {
|
||||
setValue(value);
|
||||
dispatch(setConversation({ toneStyle: value }));
|
||||
};
|
||||
return (
|
||||
<Tabs
|
||||
defaultValue={value}
|
||||
className={`shadow-md mb-1 bing-styles ${show ? 'show' : ''}`}
|
||||
onValueChange={changeHandler}
|
||||
ref={ref}
|
||||
>
|
||||
<TabsList className="bg-white/[.60] dark:bg-gray-700">
|
||||
<TabsTrigger
|
||||
value="creative"
|
||||
className={`${value === 'creative' ? selectedClass(value) : defaultClasses}`}
|
||||
>
|
||||
{'Creative'}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="fast"
|
||||
className={`${value === 'fast' ? selectedClass(value) : defaultClasses}`}
|
||||
>
|
||||
{'Fast'}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="balanced"
|
||||
className={`${value === 'balanced' ? selectedClass(value) : defaultClasses}`}
|
||||
>
|
||||
{'Balanced'}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="precise"
|
||||
className={`${value === 'precise' ? selectedClass(value) : defaultClasses}`}
|
||||
>
|
||||
{'Precise'}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(BingStyles);
|
||||
18
client/src/components/Input/Footer.jsx
Normal file
18
client/src/components/Input/Footer.jsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<div className="hidden md:block px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-4">
|
||||
<a
|
||||
href="https://github.com/danny-avila/chatgpt-clone"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
ChatGPT Clone
|
||||
</a>
|
||||
. Serves and searches all conversations reliably. All AI convos under one house. Pay per
|
||||
call and not per month (cents compared to dollars).
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
client/src/components/Input/Models/MenuItems.jsx
Normal file
17
client/src/components/Input/Models/MenuItems.jsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import ModelItem from './ModelItem';
|
||||
|
||||
export default function MenuItems({ models, onSelect }) {
|
||||
return (
|
||||
<>
|
||||
{models.map(modelItem => (
|
||||
<ModelItem
|
||||
key={modelItem._id}
|
||||
value={modelItem.value}
|
||||
onSelect={onSelect}
|
||||
model={modelItem}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
156
client/src/components/Input/Models/ModelDialog.jsx
Normal file
156
client/src/components/Input/Models/ModelDialog.jsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import manualSWR from '~/utils/fetchers';
|
||||
import { Button } from '../../ui/Button.tsx';
|
||||
import { Input } from '../../ui/Input.tsx';
|
||||
import { Label } from '../../ui/Label.tsx';
|
||||
|
||||
import {
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '../../ui/Dialog.tsx';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
|
||||
const { newConversation } = store.useConversation();
|
||||
|
||||
const [chatGptLabel, setChatGptLabel] = useState('');
|
||||
const [promptPrefix, setPromptPrefix] = useState('');
|
||||
const [saveText, setSaveText] = useState('Save');
|
||||
const [required, setRequired] = useState(false);
|
||||
const inputRef = useRef(null);
|
||||
const updateCustomGpt = manualSWR(`/api/customGpts/`, 'post');
|
||||
|
||||
const selectHandler = e => {
|
||||
if (chatGptLabel.length === 0) {
|
||||
e.preventDefault();
|
||||
setRequired(true);
|
||||
inputRef.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
handleSaveState(chatGptLabel.toLowerCase());
|
||||
|
||||
// Set new conversation
|
||||
newConversation({
|
||||
model: 'chatgptCustom',
|
||||
chatGptLabel,
|
||||
promptPrefix
|
||||
});
|
||||
};
|
||||
|
||||
const saveHandler = e => {
|
||||
e.preventDefault();
|
||||
setModelSave(true);
|
||||
const value = chatGptLabel.toLowerCase();
|
||||
|
||||
if (chatGptLabel.length === 0) {
|
||||
setRequired(true);
|
||||
inputRef.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
updateCustomGpt.trigger({ value, chatGptLabel, promptPrefix });
|
||||
|
||||
mutate();
|
||||
setSaveText(prev => prev + 'd!');
|
||||
setTimeout(() => {
|
||||
setSaveText('Save');
|
||||
}, 2500);
|
||||
|
||||
// dispatch(setCustomGpt({ chatGptLabel, promptPrefix }));
|
||||
newConversation({
|
||||
model: 'chatgptCustom',
|
||||
chatGptLabel,
|
||||
promptPrefix
|
||||
});
|
||||
};
|
||||
|
||||
// Commented by wtlyu
|
||||
// if (
|
||||
// chatGptLabel !== 'chatgptCustom' &&
|
||||
// modelMap[chatGptLabel.toLowerCase()] &&
|
||||
// !initial[chatGptLabel.toLowerCase()] &&
|
||||
// saveText === 'Save'
|
||||
// ) {
|
||||
// setSaveText('Update');
|
||||
// } else if (!modelMap[chatGptLabel.toLowerCase()] && saveText === 'Update') {
|
||||
// setSaveText('Save');
|
||||
// }
|
||||
|
||||
const requiredProp = required ? { required: true } : {};
|
||||
|
||||
return (
|
||||
<DialogContent className="shadow-2xl dark:bg-gray-800">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-gray-800 dark:text-white">Customize ChatGPT</DialogTitle>
|
||||
<DialogDescription className="text-gray-600 dark:text-gray-300">
|
||||
Note: important instructions are often better placed in your message rather than the prefix.{' '}
|
||||
<a
|
||||
href="https://platform.openai.com/docs/guides/chat/instructing-chat-models"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<u>More info here</u>
|
||||
</a>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label
|
||||
htmlFor="chatGptLabel"
|
||||
className="text-right"
|
||||
>
|
||||
Custom Name
|
||||
</Label>
|
||||
<Input
|
||||
id="chatGptLabel"
|
||||
value={chatGptLabel}
|
||||
ref={inputRef}
|
||||
onChange={e => setChatGptLabel(e.target.value)}
|
||||
placeholder="Set a custom name for ChatGPT"
|
||||
className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 invalid:border-red-400 invalid:text-red-600 invalid:placeholder-red-600 invalid:placeholder-opacity-70 invalid:ring-opacity-10 focus:ring-0 focus:invalid:border-red-400 focus:invalid:ring-red-300 dark:border-none dark:bg-gray-700
|
||||
dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:invalid:border-red-600 dark:invalid:text-red-300 dark:invalid:placeholder-opacity-80 dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0 dark:focus:invalid:ring-red-600 dark:focus:invalid:ring-opacity-50"
|
||||
{...requiredProp}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label
|
||||
htmlFor="promptPrefix"
|
||||
className="text-right"
|
||||
>
|
||||
Prompt Prefix
|
||||
</Label>
|
||||
<TextareaAutosize
|
||||
id="promptPrefix"
|
||||
value={promptPrefix}
|
||||
onChange={e => setPromptPrefix(e.target.value)}
|
||||
placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
|
||||
className="col-span-3 flex h-20 w-full resize-none rounded-md border border-gray-300 bg-transparent py-2 px-3 text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-none dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
|
||||
<Button
|
||||
style={{ backgroundColor: 'rgb(16, 163, 127)' }}
|
||||
onClick={saveHandler}
|
||||
className="inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold text-white transition-colors dark:text-gray-200"
|
||||
>
|
||||
{saveText}
|
||||
</Button>
|
||||
<DialogClose
|
||||
onClick={selectHandler}
|
||||
className="inline-flex h-10 items-center justify-center rounded-md border-none bg-gray-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
|
||||
>
|
||||
Select
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
180
client/src/components/Input/Models/ModelItem.jsx
Normal file
180
client/src/components/Input/Models/ModelItem.jsx
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { DropdownMenuRadioItem } from '../../ui/DropdownMenu.tsx';
|
||||
import { Circle } from 'lucide-react';
|
||||
import { DialogTrigger } from '../../ui/Dialog.tsx';
|
||||
import RenameButton from '../../Conversations/RenameButton';
|
||||
import TrashIcon from '../../svg/TrashIcon';
|
||||
import manualSWR from '~/utils/fetchers';
|
||||
import { getIconOfModel } from '~/utils';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
export default function ModelItem({ model: _model, value, onSelect }) {
|
||||
const { name, model, _id: id, chatGptLabel = null, promptPrefix = null } = _model;
|
||||
const setCustomGPTModels = useSetRecoilState(store.customGPTModels);
|
||||
const currentConversation = useRecoilValue(store.conversation) || {};
|
||||
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const [renaming, setRenaming] = useState(false);
|
||||
const [currentName, setCurrentName] = useState(name);
|
||||
const [modelInput, setModelInput] = useState(name);
|
||||
const inputRef = useRef(null);
|
||||
const rename = manualSWR(`/api/customGpts`, 'post', res => {});
|
||||
const deleteCustom = manualSWR(`/api/customGpts/delete`, 'post', res => {
|
||||
const fetchedModels = res.data.map(modelItem => ({
|
||||
...modelItem,
|
||||
name: modelItem.chatGptLabel,
|
||||
model: 'chatgptCustom'
|
||||
}));
|
||||
|
||||
setCustomGPTModels(fetchedModels);
|
||||
});
|
||||
|
||||
const icon = getIconOfModel({
|
||||
size: 20,
|
||||
sender: chatGptLabel || model,
|
||||
isCreatedByUser: false,
|
||||
model,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
error: false,
|
||||
className: 'mr-2'
|
||||
});
|
||||
|
||||
if (model !== 'chatgptCustom')
|
||||
// regular model
|
||||
return (
|
||||
<DropdownMenuRadioItem
|
||||
value={value}
|
||||
className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
{icon}
|
||||
{name}
|
||||
{model === 'chatgpt' && <sup>$</sup>}
|
||||
</DropdownMenuRadioItem>
|
||||
);
|
||||
else if (model === 'chatgptCustom' && chatGptLabel === null && promptPrefix === null)
|
||||
// base chatgptCustom model, click to add new chatgptCustom.
|
||||
return (
|
||||
<DialogTrigger className="w-full">
|
||||
<DropdownMenuRadioItem
|
||||
value={value}
|
||||
className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
{icon}
|
||||
{name}
|
||||
<sup>$</sup>
|
||||
</DropdownMenuRadioItem>
|
||||
</DialogTrigger>
|
||||
);
|
||||
|
||||
// else: a chatgptCustom model
|
||||
const handleMouseOver = () => {
|
||||
setIsHovering(true);
|
||||
};
|
||||
|
||||
const handleMouseOut = () => {
|
||||
setIsHovering(false);
|
||||
};
|
||||
|
||||
const renameHandler = e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setRenaming(true);
|
||||
setTimeout(() => {
|
||||
inputRef.current.focus();
|
||||
}, 25);
|
||||
};
|
||||
|
||||
const onRename = e => {
|
||||
e.preventDefault();
|
||||
setRenaming(false);
|
||||
if (modelInput === name) {
|
||||
return;
|
||||
}
|
||||
rename.trigger({
|
||||
prevLabel: currentName,
|
||||
chatGptLabel: modelInput,
|
||||
value: modelInput.toLowerCase()
|
||||
});
|
||||
setCurrentName(modelInput);
|
||||
};
|
||||
|
||||
const onDelete = async e => {
|
||||
e.preventDefault();
|
||||
await deleteCustom.trigger({ _id: id });
|
||||
onSelect('chatgpt');
|
||||
};
|
||||
|
||||
const handleKeyDown = e => {
|
||||
if (e.key === 'Enter') {
|
||||
onRename(e);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonClass = {
|
||||
className:
|
||||
'invisible group-hover:visible z-50 rounded-md m-0 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
|
||||
};
|
||||
|
||||
const itemClass = {
|
||||
className:
|
||||
'relative flex group cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none hover:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:hover:bg-slate-700 dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800'
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
value={value}
|
||||
className={itemClass.className}
|
||||
onClick={e => {
|
||||
if (isHovering) {
|
||||
return;
|
||||
}
|
||||
onSelect('chatgptCustom', value);
|
||||
}}
|
||||
>
|
||||
{currentConversation?.chatGptLabel === value && (
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</span>
|
||||
)}
|
||||
|
||||
{icon}
|
||||
|
||||
{renaming === true ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
key={id}
|
||||
type="text"
|
||||
className="pointer-events-auto z-50 m-0 mr-2 w-3/4 border border-blue-500 bg-transparent p-0 text-sm leading-tight outline-none"
|
||||
value={modelInput}
|
||||
onClick={e => e.stopPropagation()}
|
||||
onChange={e => setModelInput(e.target.value)}
|
||||
// onBlur={onRename}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
) : (
|
||||
<div className=" overflow-hidden">{modelInput}</div>
|
||||
)}
|
||||
|
||||
{value === 'chatgpt' && <sup>$</sup>}
|
||||
<RenameButton
|
||||
twcss={`ml-auto mr-2 ${buttonClass.className}`}
|
||||
onRename={onRename}
|
||||
renaming={renaming}
|
||||
onMouseOver={handleMouseOver}
|
||||
onMouseOut={handleMouseOut}
|
||||
renameHandler={renameHandler}
|
||||
/>
|
||||
<button
|
||||
{...buttonClass}
|
||||
onMouseOver={handleMouseOver}
|
||||
onMouseOut={handleMouseOut}
|
||||
onClick={onDelete}
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
205
client/src/components/Input/Models/ModelMenu.jsx
Normal file
205
client/src/components/Input/Models/ModelMenu.jsx
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import axios from 'axios';
|
||||
import ModelDialog from './ModelDialog';
|
||||
import MenuItems from './MenuItems';
|
||||
import { swr } from '~/utils/fetchers';
|
||||
import { getIconOfModel } from '~/utils';
|
||||
|
||||
import { Button } from '../../ui/Button.tsx';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '../../ui/DropdownMenu.tsx';
|
||||
import { Dialog } from '../../ui/Dialog.tsx';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
export default function ModelMenu() {
|
||||
const [modelSave, setModelSave] = useState(false);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
const models = useRecoilValue(store.models);
|
||||
const availableModels = useRecoilValue(store.availableModels);
|
||||
const setCustomGPTModels = useSetRecoilState(store.customGPTModels);
|
||||
|
||||
const conversation = useRecoilValue(store.conversation) || {};
|
||||
const { model, promptPrefix, chatGptLabel, conversationId } = conversation;
|
||||
const { newConversation } = store.useConversation();
|
||||
|
||||
// fetch the list of saved chatgptCustom
|
||||
const { data, isLoading, mutate } = swr(`/api/customGpts`, res => {
|
||||
const fetchedModels = res.map(modelItem => ({
|
||||
...modelItem,
|
||||
name: modelItem.chatGptLabel,
|
||||
model: 'chatgptCustom'
|
||||
}));
|
||||
|
||||
setCustomGPTModels(fetchedModels);
|
||||
});
|
||||
|
||||
// useEffect(() => {
|
||||
// mutate();
|
||||
// try {
|
||||
// const lastSelected = JSON.parse(localStorage.getItem('model'));
|
||||
|
||||
// if (lastSelected === 'chatgptCustom') {
|
||||
// return;
|
||||
// } else if (initial[lastSelected]) {
|
||||
// dispatch(setModel(lastSelected));
|
||||
// }
|
||||
// } catch (err) {
|
||||
// console.log(err);
|
||||
// }
|
||||
|
||||
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// }, []);
|
||||
|
||||
// update the default model when availableModels changes
|
||||
// typically, availableModels changes => modelsFilter or customGPTModels changes
|
||||
useEffect(() => {
|
||||
if (conversationId == 'new') {
|
||||
newConversation();
|
||||
}
|
||||
}, [availableModels]);
|
||||
|
||||
// save selected model to localstoreage
|
||||
useEffect(() => {
|
||||
if (model) localStorage.setItem('model', JSON.stringify({ model, chatGptLabel, promptPrefix }));
|
||||
}, [model]);
|
||||
|
||||
// set the current model
|
||||
const onChange = (newModel, value = null) => {
|
||||
setMenuOpen(false);
|
||||
|
||||
if (!newModel) {
|
||||
return;
|
||||
} else if (newModel === model && value === chatGptLabel) {
|
||||
// bypass if not changed
|
||||
return;
|
||||
} else if (newModel === 'chatgptCustom' && value === null) {
|
||||
// return;
|
||||
} else if (newModel !== 'chatgptCustom') {
|
||||
newConversation({
|
||||
model: newModel,
|
||||
chatGptLabel: null,
|
||||
promptPrefix: null
|
||||
});
|
||||
} else if (newModel === 'chatgptCustom') {
|
||||
const targetModel = models.find(element => element.value == value);
|
||||
if (targetModel) {
|
||||
const chatGptLabel = targetModel?.chatGptLabel;
|
||||
const promptPrefix = targetModel?.promptPrefix;
|
||||
newConversation({
|
||||
model: newModel,
|
||||
chatGptLabel,
|
||||
promptPrefix
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onOpenChange = open => {
|
||||
mutate();
|
||||
if (!open) {
|
||||
setModelSave(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveState = value => {
|
||||
if (!modelSave) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCustomGPTModels(value);
|
||||
setModelSave(false);
|
||||
};
|
||||
|
||||
const defaultColorProps = [
|
||||
'text-gray-500',
|
||||
'hover:bg-gray-100',
|
||||
'hover:bg-opacity-20',
|
||||
'disabled:hover:bg-transparent',
|
||||
'dark:data-[state=open]:bg-gray-800',
|
||||
'dark:hover:bg-opacity-20',
|
||||
'dark:hover:bg-gray-900',
|
||||
'dark:hover:text-gray-400',
|
||||
'dark:disabled:hover:bg-transparent'
|
||||
];
|
||||
|
||||
const chatgptColorProps = [
|
||||
'text-green-700',
|
||||
'data-[state=open]:bg-green-100',
|
||||
'dark:text-emerald-300',
|
||||
'hover:bg-green-100',
|
||||
'disabled:hover:bg-transparent',
|
||||
'dark:data-[state=open]:bg-green-900',
|
||||
'dark:hover:bg-opacity-50',
|
||||
'dark:hover:bg-green-900',
|
||||
'dark:hover:text-gray-100',
|
||||
'dark:disabled:hover:bg-transparent'
|
||||
];
|
||||
|
||||
const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
|
||||
const icon = getIconOfModel({
|
||||
size: 32,
|
||||
sender: chatGptLabel || model,
|
||||
isCreatedByUser: false,
|
||||
model,
|
||||
chatGptLabel,
|
||||
promptPrefix,
|
||||
error: false,
|
||||
button: true
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog onOpenChange={onOpenChange}>
|
||||
<DropdownMenu
|
||||
open={menuOpen}
|
||||
onOpenChange={setMenuOpen}
|
||||
>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
// style={{backgroundColor: 'rgb(16, 163, 127)'}}
|
||||
className={`absolute top-[0.25px] mb-0 ml-1 items-center rounded-md border-0 p-1 outline-none md:ml-0 ${colorProps.join(
|
||||
' '
|
||||
)} focus:ring-0 focus:ring-offset-0 disabled:top-[0.25px] dark:data-[state=open]:bg-opacity-50 md:top-1 md:left-1 md:pl-1 md:disabled:top-1`}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-56 dark:bg-gray-700"
|
||||
onCloseAutoFocus={event => event.preventDefault()}
|
||||
>
|
||||
<DropdownMenuLabel className="dark:text-gray-300">Select a Model</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuRadioGroup
|
||||
value={chatGptLabel || model}
|
||||
onValueChange={onChange}
|
||||
className="overflow-y-auto"
|
||||
>
|
||||
{availableModels.length ? (
|
||||
<MenuItems
|
||||
models={availableModels}
|
||||
onSelect={onChange}
|
||||
/>
|
||||
) : (
|
||||
<DropdownMenuLabel className="dark:text-gray-300">No model available.</DropdownMenuLabel>
|
||||
)}
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<ModelDialog
|
||||
mutate={mutate}
|
||||
setModelSave={setModelSave}
|
||||
handleSaveState={handleSaveState}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
16
client/src/components/Input/RowButton.jsx
Normal file
16
client/src/components/Input/RowButton.jsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function RowButton({ onClick, children, text, className }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border ${className}`}
|
||||
type="button"
|
||||
>
|
||||
{children}
|
||||
<span className="hidden md:block">{text}</span>
|
||||
{/* <RegenerateIcon />
|
||||
<span className="hidden md:block">Regenerate response</span> */}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
57
client/src/components/Input/SubmitButton.jsx
Normal file
57
client/src/components/Input/SubmitButton.jsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function SubmitButton({ submitMessage, disabled, isSubmitting }) {
|
||||
const clickHandler = e => {
|
||||
e.preventDefault();
|
||||
submitMessage();
|
||||
};
|
||||
|
||||
if (isSubmitting) {
|
||||
return (
|
||||
<button
|
||||
className="absolute bottom-0 right-1 h-[100%] w-[30px] rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:hover:bg-transparent dark:hover:bg-gray-900 dark:hover:text-gray-400 dark:disabled:hover:bg-transparent md:right-2"
|
||||
disabled
|
||||
>
|
||||
<div className="text-2xl">
|
||||
<span>·</span>
|
||||
<span className="blink">·</span>
|
||||
<span className="blink2">·</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<button
|
||||
onClick={clickHandler}
|
||||
disabled={disabled}
|
||||
className="group absolute bottom-0 right-0 flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
|
||||
>
|
||||
<div className="m-1 mr-0 rounded-md p-2 pt-[10px] pb-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="mr-1 h-4 w-4 "
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line
|
||||
x1="22"
|
||||
y1="2"
|
||||
x2="11"
|
||||
y2="13"
|
||||
/>
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
{
|
||||
/* <div class="text-2xl"><span class="">·</span><span class="">·</span><span class="invisible">·</span></div> */
|
||||
}
|
||||
454
client/src/components/Input/index.jsx
Normal file
454
client/src/components/Input/index.jsx
Normal file
|
|
@ -0,0 +1,454 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useRecoilValue, useRecoilState } from 'recoil';
|
||||
// import { SSE } from '~/utils/sse';
|
||||
import SubmitButton from './SubmitButton';
|
||||
// import AdjustToneButton from './AdjustToneButton';
|
||||
// import BingStyles from './BingStyles';
|
||||
import ModelMenu from './Models/ModelMenu';
|
||||
import Footer from './Footer';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import createPayload from '~/utils/createPayload';
|
||||
import RegenerateIcon from '../svg/RegenerateIcon';
|
||||
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
|
||||
// import { setConversation, setError, refreshConversation } from '~/store/convoSlice';
|
||||
// import { setMessages } from '~/store/messageSlice';
|
||||
// import { setSubmitState, toggleCursor } from '~/store/submitSlice';
|
||||
// import { setText } from '~/store/textSlice';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
export default function TextChat() {
|
||||
const inputRef = useRef(null);
|
||||
const isComposing = useRef(false);
|
||||
|
||||
const conversation = useRecoilValue(store.conversation);
|
||||
const latestMessage = useRecoilValue(store.latestMessage);
|
||||
const messages = useRecoilValue(store.messages);
|
||||
|
||||
const isSubmitting = useRecoilValue(store.isSubmitting);
|
||||
|
||||
// TODO: do we need this?
|
||||
const disabled = false;
|
||||
|
||||
const [text, setText] = useState('');
|
||||
const { ask, regenerate, stopGenerating } = useMessageHandler();
|
||||
|
||||
const bingStylesRef = useRef(null);
|
||||
const [showBingToneSetting, setShowBingToneSetting] = useState(false);
|
||||
|
||||
const isNotAppendable = latestMessage?.cancelled || latestMessage?.error;
|
||||
|
||||
// auto focus to input, when enter a conversation.
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
setText('');
|
||||
}, [conversation?.conversationId]);
|
||||
|
||||
// controls the height of Bing tone style tabs
|
||||
useEffect(() => {
|
||||
if (!inputRef.current) {
|
||||
return; // wait for the ref to be available
|
||||
}
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
const newHeight = inputRef.current.clientHeight;
|
||||
if (newHeight >= 24) {
|
||||
// 24 is the default height of the input
|
||||
bingStylesRef.current.style.bottom = 15 + newHeight + 'px';
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(inputRef.current);
|
||||
return () => resizeObserver.disconnect();
|
||||
}, [inputRef]);
|
||||
|
||||
// const messageHandler = (data, currentState, currentMsg) => {
|
||||
// const { messages, message, sender, isRegenerate } = currentState;
|
||||
|
||||
// if (isRegenerate)
|
||||
// dispatch(
|
||||
// setMessages([
|
||||
// ...messages,
|
||||
// {
|
||||
// sender,
|
||||
// text: data,
|
||||
// parentMessageId: message?.overrideParentMessageId,
|
||||
// messageId: message?.overrideParentMessageId + '_',
|
||||
// submitting: true
|
||||
// }
|
||||
// ])
|
||||
// );
|
||||
// else
|
||||
// dispatch(
|
||||
// setMessages([
|
||||
// ...messages,
|
||||
// currentMsg,
|
||||
// {
|
||||
// sender,
|
||||
// text: data,
|
||||
// parentMessageId: currentMsg?.messageId,
|
||||
// messageId: currentMsg?.messageId + '_',
|
||||
// submitting: true
|
||||
// }
|
||||
// ])
|
||||
// );
|
||||
// };
|
||||
|
||||
// const cancelHandler = (data, currentState, currentMsg) => {
|
||||
// const { messages, message, sender, isRegenerate } = currentState;
|
||||
|
||||
// if (isRegenerate)
|
||||
// dispatch(
|
||||
// setMessages([
|
||||
// ...messages,
|
||||
// {
|
||||
// sender,
|
||||
// text: data,
|
||||
// parentMessageId: message?.overrideParentMessageId,
|
||||
// messageId: message?.overrideParentMessageId + '_',
|
||||
// cancelled: true
|
||||
// }
|
||||
// ])
|
||||
// );
|
||||
// else
|
||||
// dispatch(
|
||||
// setMessages([
|
||||
// ...messages,
|
||||
// currentMsg,
|
||||
// {
|
||||
// sender,
|
||||
// text: data,
|
||||
// parentMessageId: currentMsg?.messageId,
|
||||
// messageId: currentMsg?.messageId + '_',
|
||||
// cancelled: true
|
||||
// }
|
||||
// ])
|
||||
// );
|
||||
// };
|
||||
|
||||
// const createdHandler = (data, currentState, currentMsg) => {
|
||||
// const { conversationId } = currentMsg;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// conversationId,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// };
|
||||
|
||||
// const convoHandler = (data, currentState) => {
|
||||
// const { requestMessage, responseMessage } = data;
|
||||
// const { messages, message, isCustomModel, isRegenerate } = currentState;
|
||||
// const { model, chatGptLabel, promptPrefix } = message;
|
||||
// if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
|
||||
// else dispatch(setMessages([...messages, requestMessage, responseMessage]));
|
||||
// dispatch(setSubmitState(false));
|
||||
|
||||
// const isBing = model === 'bingai' || model === 'sydney';
|
||||
|
||||
// // refresh title
|
||||
// if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
|
||||
// setTimeout(() => {
|
||||
// dispatch(refreshConversation());
|
||||
// }, 2000);
|
||||
|
||||
// // in case it takes too long.
|
||||
// setTimeout(() => {
|
||||
// dispatch(refreshConversation());
|
||||
// }, 5000);
|
||||
// }
|
||||
|
||||
// if (!isBing && convo.conversationId === null && convo.parentMessageId === null) {
|
||||
// const { title } = data;
|
||||
// const { conversationId, messageId } = responseMessage;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// title,
|
||||
// conversationId,
|
||||
// parentMessageId: messageId,
|
||||
// jailbreakConversationId: null,
|
||||
// conversationSignature: null,
|
||||
// clientId: null,
|
||||
// invocationId: null,
|
||||
// chatGptLabel: model === isCustomModel ? chatGptLabel : null,
|
||||
// promptPrefix: model === isCustomModel ? promptPrefix : null,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// } else if (model === 'bingai') {
|
||||
// console.log('Bing data:', data);
|
||||
// const { title } = data;
|
||||
// const { conversationSignature, clientId, conversationId, invocationId, parentMessageId } =
|
||||
// responseMessage;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// title,
|
||||
// parentMessageId,
|
||||
// conversationSignature,
|
||||
// clientId,
|
||||
// conversationId,
|
||||
// invocationId,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// } else if (model === 'sydney') {
|
||||
// const { title } = data;
|
||||
// const {
|
||||
// jailbreakConversationId,
|
||||
// parentMessageId,
|
||||
// conversationSignature,
|
||||
// clientId,
|
||||
// conversationId,
|
||||
// invocationId
|
||||
// } = responseMessage;
|
||||
// dispatch(
|
||||
// setConversation({
|
||||
// title,
|
||||
// jailbreakConversationId,
|
||||
// parentMessageId,
|
||||
// conversationSignature,
|
||||
// clientId,
|
||||
// conversationId,
|
||||
// invocationId,
|
||||
// latestMessage: null
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
// const errorHandler = (data, currentState, currentMsg) => {
|
||||
// const { messages, message } = currentState;
|
||||
// console.log('Error:', data);
|
||||
// const errorResponse = {
|
||||
// ...data,
|
||||
// error: true,
|
||||
// parentMessageId: currentMsg?.messageId
|
||||
// };
|
||||
// dispatch(setSubmitState(false));
|
||||
// dispatch(setMessages([...messages, currentMsg, errorResponse]));
|
||||
// dispatch(setText(message?.text));
|
||||
// dispatch(setError(true));
|
||||
// return;
|
||||
// };
|
||||
const submitMessage = () => {
|
||||
ask({ text });
|
||||
setText('');
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// inputRef.current?.focus();
|
||||
// if (Object.keys(submission).length === 0) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const currentState = submission;
|
||||
|
||||
// let currentMsg = { ...currentState.message };
|
||||
// let latestResponseText = '';
|
||||
|
||||
// const { server, payload } = createPayload(submission);
|
||||
// const onMessage = e => {
|
||||
// if (stopStream) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const data = JSON.parse(e.data);
|
||||
|
||||
// if (data.final) {
|
||||
// convoHandler(data, currentState);
|
||||
// dispatch(toggleCursor());
|
||||
// console.log('final', data);
|
||||
// }
|
||||
// if (data.created) {
|
||||
// currentMsg = data.message;
|
||||
// createdHandler(data, currentState, currentMsg);
|
||||
// } else {
|
||||
// let text = data.text || data.response;
|
||||
// if (data.initial) {
|
||||
// dispatch(toggleCursor());
|
||||
// }
|
||||
// if (data.message) {
|
||||
// latestResponseText = text;
|
||||
// messageHandler(text, currentState, currentMsg);
|
||||
// }
|
||||
// // console.log('dataStream', data);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const events = new SSE(server, {
|
||||
// payload: JSON.stringify(payload),
|
||||
// headers: { 'Content-Type': 'application/json' }
|
||||
// });
|
||||
|
||||
// events.onopen = function () {
|
||||
// console.log('connection is opened');
|
||||
// };
|
||||
|
||||
// events.onmessage = onMessage;
|
||||
|
||||
// events.oncancel = () => {
|
||||
// dispatch(toggleCursor(true));
|
||||
// cancelHandler(latestResponseText, currentState, currentMsg);
|
||||
// };
|
||||
|
||||
// events.onerror = function (e) {
|
||||
// console.log('error in opening conn.');
|
||||
// events.close();
|
||||
|
||||
// const data = JSON.parse(e.data);
|
||||
// dispatch(toggleCursor(true));
|
||||
// errorHandler(data, currentState, currentMsg);
|
||||
// };
|
||||
|
||||
// events.stream();
|
||||
|
||||
// return () => {
|
||||
// events.removeEventListener('message', onMessage);
|
||||
// dispatch(toggleCursor(true));
|
||||
// const isCancelled = events.readyState <= 1;
|
||||
// events.close();
|
||||
// if (isCancelled) {
|
||||
// const e = new Event('cancel');
|
||||
// events.dispatchEvent(e);
|
||||
// }
|
||||
// };
|
||||
// }, [submission]);
|
||||
|
||||
const handleRegenerate = () => {
|
||||
if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
|
||||
};
|
||||
|
||||
const handleStopGenerating = () => {
|
||||
stopGenerating();
|
||||
};
|
||||
|
||||
const handleKeyDown = e => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
if (!isComposing?.current) submitMessage();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = e => {
|
||||
if (e.keyCode === 8 && e.target.value.trim() === '') {
|
||||
setText(e.target.value);
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && e.shiftKey) {
|
||||
return console.log('Enter + Shift');
|
||||
}
|
||||
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompositionStart = () => {
|
||||
isComposing.current = true;
|
||||
};
|
||||
|
||||
const handleCompositionEnd = () => {
|
||||
isComposing.current = false;
|
||||
};
|
||||
|
||||
const changeHandler = e => {
|
||||
const { value } = e.target;
|
||||
|
||||
setText(value);
|
||||
};
|
||||
|
||||
const isSearchView = messages?.[0]?.searchResult === true;
|
||||
const getPlaceholderText = () => {
|
||||
if (isSearchView) {
|
||||
return 'Click a message title to open its conversation.';
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
return 'Choose another model or customize GPT again';
|
||||
}
|
||||
|
||||
if (isNotAppendable) {
|
||||
return 'Edit your message or Regenerate.';
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleBingToneSetting = () => {
|
||||
setShowBingToneSetting(show => !show);
|
||||
};
|
||||
|
||||
if (isSearchView) return <></>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient fixed bottom-0 left-0 w-full border-t bg-white py-2 dark:border-white/20 dark:bg-gray-800 md:absolute md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent md:dark:bg-transparent">
|
||||
<form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
|
||||
<div className="relative flex h-full flex-1 md:flex-col">
|
||||
<span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
|
||||
{/* <BingStyles
|
||||
ref={bingStylesRef}
|
||||
show={showBingToneSetting}
|
||||
/> */}
|
||||
{isSubmitting ? (
|
||||
<button
|
||||
onClick={handleStopGenerating}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<StopGeneratingIcon />
|
||||
<span className="hidden md:block">Stop generating</span>
|
||||
</button>
|
||||
) : latestMessage && !latestMessage?.isCreatedByUser ? (
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
type="button"
|
||||
>
|
||||
<RegenerateIcon />
|
||||
<span className="hidden md:block">Regenerate response</span>
|
||||
</button>
|
||||
) : null}
|
||||
</span>
|
||||
<div
|
||||
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
|
||||
disabled ? 'bg-gray-100' : 'bg-white'
|
||||
} py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
|
||||
disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
|
||||
} dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
|
||||
>
|
||||
<ModelMenu />
|
||||
<TextareaAutosize
|
||||
tabIndex="0"
|
||||
autoFocus
|
||||
ref={inputRef}
|
||||
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
|
||||
rows="1"
|
||||
value={disabled || isNotAppendable ? '' : text}
|
||||
onKeyUp={handleKeyUp}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={changeHandler}
|
||||
onCompositionStart={handleCompositionStart}
|
||||
onCompositionEnd={handleCompositionEnd}
|
||||
placeholder={getPlaceholderText()}
|
||||
disabled={disabled || isNotAppendable}
|
||||
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm placeholder:text-gray-600 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder:text-gray-500 md:pl-8"
|
||||
/>
|
||||
<SubmitButton
|
||||
submitMessage={submitMessage}
|
||||
disabled={disabled || isNotAppendable}
|
||||
/>
|
||||
{/* {messages?.length && model === 'sydney' ? (
|
||||
<AdjustToneButton onClick={handleBingToneSetting} />
|
||||
) : null} */}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue