mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-21 02:40:14 +01:00
feat: Vision Support + New UI (#1203)
* feat: add timer duration to showToast, show toast for preset selection * refactor: replace old /chat/ route with /c/. e2e tests will fail here * refactor: move typedefs to root of /api/ and add a few to assistant types in TS * refactor: reorganize data-provider imports, fix dependency cycle, strategize new plan to separate react dependent packages * feat: add dataService for uploading images * feat(data-provider): add mutation keys * feat: file resizing and upload * WIP: initial API image handling * fix: catch JSON.parse of localStorage tools * chore: experimental: use module-alias for absolute imports * refactor: change temp_file_id strategy * fix: updating files state by using Map and defining react query callbacks in a way that keeps them during component unmount, initial delete handling * feat: properly handle file deletion * refactor: unexpose complete filepath and resize from server for higher fidelity * fix: make sure resized height, width is saved, catch bad requests * refactor: use absolute imports * fix: prevent setOptions from being called more than once for OpenAIClient, made note to fix for PluginsClient * refactor: import supportsFiles and models vars from schemas * fix: correctly replace temp file id * refactor(BaseClient): use absolute imports, pass message 'opts' to buildMessages method, count tokens for nested objects/arrays * feat: add validateVisionModel to determine if model has vision capabilities * chore(checkBalance): update jsdoc * feat: formatVisionMessage: change message content format dependent on role and image_urls passed * refactor: add usage to File schema, make create and updateFile, correctly set and remove TTL * feat: working vision support TODO: file size, type, amount validations, making sure they are styled right, and making sure you can add images from the clipboard/dragging * feat: clipboard support for uploading images * feat: handle files on drop to screen, refactor top level view code to Presentation component so the useDragHelpers hook has ChatContext * fix(Images): replace uploaded images in place * feat: add filepath validation to protect sensitive files * fix: ensure correct file_ids are push and not the Map key values * fix(ToastContext): type issue * feat: add basic file validation * fix(useDragHelpers): correct context issue with `files` dependency * refactor: consolidate setErrors logic to setError * feat: add dialog Image overlay on image click * fix: close endpoints menu on click * chore: set detail to auto, make note for configuration * fix: react warning (button desc. of button) * refactor: optimize filepath handling, pass file_ids to images for easier re-use * refactor: optimize image file handling, allow re-using files in regen, pass more file metadata in messages * feat: lazy loading images including use of upload preview * fix: SetKeyDialog closing, stopPropagation on Dialog content click * style(EndpointMenuItem): tighten up the style, fix dark theme showing in lightmode, make menu more ux friendly * style: change maxheight of all settings textareas to 138px from 300px * style: better styling for textarea and enclosing buttons * refactor(PresetItems): swap back edit and delete icons * feat: make textarea placeholder dynamic to endpoint * style: show user hover buttons only on hover when message is streaming * fix: ordered list not going past 9, fix css * feat: add User/AI labels; style: hide loading spinner * feat: add back custom footer, change original footer text * feat: dynamic landing icons based on endpoint * chore: comment out assistants route * fix: autoScroll to newest on /c/ view * fix: Export Conversation on new UI * style: match message style of official more closely * ci: fix api jest unit tests, comment out e2e tests for now as they will fail until addressed * feat: more file validation and use blob in preview field, not filepath, to fix temp deletion * feat: filefilter for multer * feat: better AI labels based on custom name, model, and endpoint instead of `ChatGPT`
This commit is contained in:
Danny Avila
GitHub
parent
345f4b2e85
commit
317cdd3f77
113 changed files with 2680 additions and 675 deletions
|
|
@ -16,7 +16,7 @@ function Login() {
|
|||
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) {
|
||||
navigate('/chat/new', { replace: true });
|
||||
navigate('/c/new', { replace: true });
|
||||
}
|
||||
}, [isAuthenticated, navigate]);
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ function Registration() {
|
|||
const onRegisterUserFormSubmit = (data: TRegisterUser) => {
|
||||
registerUser.mutate(data, {
|
||||
onSuccess: () => {
|
||||
navigate('/chat/new');
|
||||
navigate('/c/new');
|
||||
},
|
||||
onError: (error) => {
|
||||
setError(true);
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ test('renders registration form', () => {
|
|||
// console.log(history);
|
||||
// waitFor(() => {
|
||||
// // expect(mutate).toHaveBeenCalled();
|
||||
// expect(history.location.pathname).toBe('/chat/new');
|
||||
// expect(history.location.pathname).toBe('/c/new');
|
||||
// });
|
||||
// });
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ import { memo } from 'react';
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useGetMessagesByConvoId } from 'librechat-data-provider';
|
||||
import { useChatHelpers, useDragHelpers, useSSE } from '~/hooks';
|
||||
import { useChatHelpers, useSSE } from '~/hooks';
|
||||
// import GenerationButtons from './Input/GenerationButtons';
|
||||
import DragDropOverlay from './Input/Files/DragDropOverlay';
|
||||
import MessagesView from './Messages/MessagesView';
|
||||
// import OptionsBar from './Input/OptionsBar';
|
||||
import { ChatContext } from '~/Providers';
|
||||
import Presentation from './Presentation';
|
||||
import ChatForm from './Input/ChatForm';
|
||||
import { Spinner } from '~/components';
|
||||
import { buildTree } from '~/utils';
|
||||
|
|
@ -16,15 +16,7 @@ import Header from './Header';
|
|||
import Footer from './Footer';
|
||||
import store from '~/store';
|
||||
|
||||
function ChatView({
|
||||
// messagesTree,
|
||||
// isLoading,
|
||||
index = 0,
|
||||
}: {
|
||||
// messagesTree?: TMessage[] | null;
|
||||
// isLoading: boolean;
|
||||
index?: number;
|
||||
}) {
|
||||
function ChatView({ index = 0 }: { index?: number }) {
|
||||
const { conversationId } = useParams();
|
||||
const submissionAtIndex = useRecoilValue(store.submissionByIndex(0));
|
||||
useSSE(submissionAtIndex);
|
||||
|
|
@ -35,36 +27,28 @@ function ChatView({
|
|||
return dataTree?.length === 0 ? null : dataTree ?? null;
|
||||
},
|
||||
});
|
||||
|
||||
const chatHelpers = useChatHelpers(index, conversationId);
|
||||
const { isOver, canDrop, drop } = useDragHelpers(chatHelpers.setFiles);
|
||||
const isActive = canDrop && isOver;
|
||||
|
||||
return (
|
||||
<ChatContext.Provider value={chatHelpers}>
|
||||
<div
|
||||
ref={drop}
|
||||
className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800"
|
||||
>
|
||||
<div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-0 dark:bg-gray-800">
|
||||
<div className="flex h-full flex-col" role="presentation" tabIndex={0}>
|
||||
{isLoading && conversationId !== 'new' ? (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<Spinner className="dark:text-white" />
|
||||
</div>
|
||||
) : messagesTree && messagesTree.length !== 0 ? (
|
||||
<MessagesView messagesTree={messagesTree} Header={<Header />} />
|
||||
) : (
|
||||
<Landing Header={<Header />} />
|
||||
)}
|
||||
{/* <OptionsBar messagesTree={messagesTree} /> */}
|
||||
{/* <GenerationButtons endpoint={chatHelpers.conversation.endpoint ?? ''} /> */}
|
||||
<div className="gizmo:border-t-0 gizmo:pl-0 gizmo:md:pl-0 w-full border-t pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-2 md:pt-0 md:dark:border-transparent">
|
||||
<ChatForm index={index} />
|
||||
<Footer />
|
||||
</div>
|
||||
{isActive && <DragDropOverlay />}
|
||||
<Presentation>
|
||||
{isLoading && conversationId !== 'new' ? (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<Spinner className="opacity-0" />
|
||||
</div>
|
||||
) : messagesTree && messagesTree.length !== 0 ? (
|
||||
<MessagesView messagesTree={messagesTree} Header={<Header />} />
|
||||
) : (
|
||||
<Landing Header={<Header />} />
|
||||
)}
|
||||
{/* <OptionsBar messagesTree={messagesTree} /> */}
|
||||
{/* <GenerationButtons endpoint={chatHelpers.conversation.endpoint ?? ''} /> */}
|
||||
<div className="w-full border-t-0 pl-0 pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent">
|
||||
<ChatForm index={index} />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</Presentation>
|
||||
</ChatContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,28 @@
|
|||
import { useGetStartupConfig } from 'librechat-data-provider';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
export default function Footer() {
|
||||
const { data: config } = useGetStartupConfig();
|
||||
const localize = useLocalize();
|
||||
return (
|
||||
<div className="relative px-2 py-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-[60px]">
|
||||
<span>ChatGPT can make mistakes. Consider checking important information.</span>
|
||||
<span>
|
||||
{typeof config?.customFooter === 'string' ? (
|
||||
config.customFooter
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
href="https://github.com/danny-avila/LibreChat"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
{config?.appTitle || 'LibreChat'} v0.6.1
|
||||
</a>
|
||||
{' - '} {localize('com_ui_new_footer')}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,16 @@ import store from '~/store';
|
|||
|
||||
export default function ChatForm({ index = 0 }) {
|
||||
const [text, setText] = useRecoilState(store.textByIndex(index));
|
||||
const { ask, files, setFiles, conversation, isSubmitting, handleStopGenerating } =
|
||||
useChatContext();
|
||||
const {
|
||||
ask,
|
||||
files,
|
||||
setFiles,
|
||||
conversation,
|
||||
isSubmitting,
|
||||
handleStopGenerating,
|
||||
filesLoading,
|
||||
setFilesLoading,
|
||||
} = useChatContext();
|
||||
|
||||
const submitMessage = () => {
|
||||
ask({ text });
|
||||
|
|
@ -29,7 +37,7 @@ export default function ChatForm({ index = 0 }) {
|
|||
<div className="relative flex h-full flex-1 items-stretch md:flex-col">
|
||||
<div className="flex w-full items-center">
|
||||
<div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(52,53,65,0.95)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
|
||||
<Images files={files} setFiles={setFiles} />
|
||||
<Images files={files} setFiles={setFiles} setFilesLoading={setFilesLoading} />
|
||||
<Textarea
|
||||
value={text}
|
||||
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value)}
|
||||
|
|
@ -38,7 +46,11 @@ export default function ChatForm({ index = 0 }) {
|
|||
endpoint={conversation?.endpoint}
|
||||
/>
|
||||
<AttachFile endpoint={conversation?.endpoint ?? ''} />
|
||||
{isSubmitting ? <StopButton stop={handleStopGenerating} /> : <SendButton text={text} />}
|
||||
{isSubmitting ? (
|
||||
<StopButton stop={handleStopGenerating} />
|
||||
) : (
|
||||
<SendButton text={text} disabled={filesLoading} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import type { EModelEndpoint } from 'librechat-data-provider';
|
||||
import { EModelEndpoint, supportsFiles } from 'librechat-data-provider';
|
||||
import { AttachmentIcon } from '~/components/svg';
|
||||
import { FileUpload } from '~/components/ui';
|
||||
import { useFileHandling } from '~/hooks';
|
||||
import { supportsFiles } from '~/common';
|
||||
|
||||
export default function AttachFile({ endpoint }: { endpoint: EModelEndpoint | '' }) {
|
||||
const { handleFileChange } = useFileHandling();
|
||||
|
|
@ -11,9 +10,14 @@ export default function AttachFile({ endpoint }: { endpoint: EModelEndpoint | ''
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-1 left-0 md:left-1">
|
||||
<div className="absolute bottom-2 left-2 md:bottom-3 md:left-4">
|
||||
<FileUpload handleFileChange={handleFileChange} className="flex">
|
||||
<button className="btn relative p-0 text-black dark:text-white" aria-label="Attach files">
|
||||
<button
|
||||
type="button"
|
||||
className="btn relative p-0 text-black dark:text-white"
|
||||
aria-label="Attach files"
|
||||
style={{ padding: 0 }}
|
||||
>
|
||||
<div className="flex w-full items-center justify-center gap-2">
|
||||
<AttachmentIcon />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ const Image = ({
|
|||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 rounded-full border border-white bg-gray-500 p-0.5 text-white transition-colors hover:bg-black hover:opacity-100 group-hover:opacity-100 md:opacity-0"
|
||||
onClick={onDelete}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,100 @@
|
|||
import Image from './Image';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import type { BatchFile } from 'librechat-data-provider';
|
||||
import { useDeleteFilesMutation } from '~/data-provider';
|
||||
import { ExtendedFile } from '~/common';
|
||||
import Image from './Image';
|
||||
|
||||
export default function Images({
|
||||
files,
|
||||
files: _files,
|
||||
setFiles,
|
||||
setFilesLoading,
|
||||
}: {
|
||||
files: ExtendedFile[];
|
||||
setFiles: React.Dispatch<React.SetStateAction<ExtendedFile[]>>;
|
||||
files: Map<string, ExtendedFile>;
|
||||
setFiles: React.Dispatch<React.SetStateAction<Map<string, ExtendedFile>>>;
|
||||
setFilesLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [_batch, setFileDeleteBatch] = useState<BatchFile[]>([]);
|
||||
const files = Array.from(_files.values());
|
||||
|
||||
useEffect(() => {
|
||||
if (!files) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (files.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (files.some((file) => file.progress < 1)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (files.every((file) => file.progress === 1)) {
|
||||
setFilesLoading(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [files]);
|
||||
|
||||
const deleteFiles = useDeleteFilesMutation({
|
||||
onSuccess: () => {
|
||||
console.log('Files deleted');
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log('Error deleting files:', error);
|
||||
},
|
||||
});
|
||||
|
||||
const executeBatchDelete = useCallback(
|
||||
(filesToDelete: BatchFile[]) => {
|
||||
console.log('Deleting files:', filesToDelete);
|
||||
deleteFiles.mutate({ files: filesToDelete });
|
||||
setFileDeleteBatch([]);
|
||||
},
|
||||
[deleteFiles],
|
||||
);
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const debouncedDelete = useCallback(debounce(executeBatchDelete, 1000), []);
|
||||
|
||||
useEffect(() => {
|
||||
// Cleanup function for debouncedDelete when component unmounts or before re-render
|
||||
return () => debouncedDelete.cancel();
|
||||
}, [debouncedDelete]);
|
||||
|
||||
if (files.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const deleteFile = (_file: ExtendedFile) => {
|
||||
const { file_id, progress, temp_file_id = '', filepath = '' } = _file;
|
||||
if (progress < 1) {
|
||||
return;
|
||||
}
|
||||
const file = {
|
||||
file_id,
|
||||
filepath,
|
||||
};
|
||||
|
||||
setFiles((currentFiles) => {
|
||||
const updatedFiles = new Map(currentFiles);
|
||||
updatedFiles.delete(file_id);
|
||||
updatedFiles.delete(temp_file_id);
|
||||
return updatedFiles;
|
||||
});
|
||||
|
||||
setFileDeleteBatch((prevBatch) => {
|
||||
const newBatch = [...prevBatch, file];
|
||||
debouncedDelete(newBatch);
|
||||
return newBatch;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-2 mt-2 flex flex-wrap gap-2 px-2.5 md:pl-0 md:pr-4">
|
||||
{files.map((file: ExtendedFile, index: number) => {
|
||||
const handleDelete = () => {
|
||||
setFiles((currentFiles) =>
|
||||
currentFiles.filter((_file) => file.preview !== _file.preview),
|
||||
);
|
||||
};
|
||||
const handleDelete = () => deleteFile(file);
|
||||
return (
|
||||
<Image key={index} url={file.preview} onDelete={handleDelete} progress={file.progress} />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
import { SendIcon } from '~/components/svg';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function SendButton({ text }) {
|
||||
export default function SendButton({ text, disabled }) {
|
||||
return (
|
||||
<button
|
||||
disabled={!text}
|
||||
className="enabled:bg-brand-purple absolute bottom-2.5 right-1.5 rounded-lg rounded-md border border-black p-0.5 p-1 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white md:bottom-3 md:right-3 md:p-[2px]"
|
||||
disabled={!text || disabled}
|
||||
className={cn(
|
||||
'enabled:bg-brand-purple absolute rounded-lg rounded-md border border-black p-0.5 p-1 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white ',
|
||||
'bottom-1.5 right-1.5 md:bottom-2.5 md:right-3 md:p-[2px]',
|
||||
)}
|
||||
data-testid="send-button"
|
||||
type="submit"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,27 @@
|
|||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import { supportsFiles } from '~/common';
|
||||
import { useTextarea } from '~/hooks';
|
||||
import { supportsFiles } from 'librechat-data-provider';
|
||||
import { cn, removeFocusOutlines } from '~/utils';
|
||||
import { useTextarea } from '~/hooks';
|
||||
|
||||
export default function Textarea({ value, onChange, setText, submitMessage, endpoint }) {
|
||||
const {
|
||||
inputRef,
|
||||
handleKeyDown,
|
||||
handlePaste,
|
||||
handleKeyUp,
|
||||
handleKeyDown,
|
||||
handleCompositionStart,
|
||||
handleCompositionEnd,
|
||||
onHeightChange,
|
||||
placeholder,
|
||||
} = useTextarea({ setText, submitMessage });
|
||||
|
||||
const className = supportsFiles[endpoint]
|
||||
? // ? 'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
|
||||
// : 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-3 md:pl-4';
|
||||
'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
|
||||
: 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-3.5 md:pr-12 placeholder-black/50 dark:placeholder-white/50 pl-3 md:pl-4';
|
||||
|
||||
return (
|
||||
<TextareaAutosize
|
||||
ref={inputRef}
|
||||
autoFocus
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onPaste={handlePaste}
|
||||
onKeyUp={handleKeyUp}
|
||||
onKeyDown={handleKeyDown}
|
||||
onCompositionStart={handleCompositionStart}
|
||||
|
|
@ -34,12 +30,15 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
|
|||
id="prompt-textarea"
|
||||
tabIndex={0}
|
||||
data-testid="text-input"
|
||||
// style={{ maxHeight: '200px', height: '52px', overflowY: 'hidden' }}
|
||||
style={{ height: 44, overflowY: 'hidden' }}
|
||||
rows={1}
|
||||
placeholder={placeholder}
|
||||
// className="m-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-12 gizmo:pl-10 md:pl-[46px] gizmo:md:pl-[55px]"
|
||||
// className="gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 gizmo:pl-10 gizmo:md:pl-[55px] m-0 h-auto max-h-52 w-full resize-none overflow-y-hidden border-0 bg-transparent py-[10px] pl-12 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pl-[46px] md:pr-12"
|
||||
className={cn(className, removeFocusOutlines, 'max-h-52')}
|
||||
className={cn(
|
||||
supportsFiles[endpoint] ? ' pl-10 md:pl-[55px]' : 'pl-3 md:pl-4',
|
||||
'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 md:pr-12 ',
|
||||
removeFocusOutlines,
|
||||
'max-h-52',
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,25 @@
|
|||
import type { ReactNode } from 'react';
|
||||
import { EModelEndpoint } from 'librechat-data-provider';
|
||||
import { icons } from './Menus/Endpoints/Icons';
|
||||
import { useChatContext } from '~/Providers';
|
||||
export default function Landing({ Header }: { Header?: ReactNode }) {
|
||||
const { conversation } = useChatContext();
|
||||
let { endpoint } = conversation ?? {};
|
||||
if (
|
||||
endpoint === EModelEndpoint.assistant ||
|
||||
endpoint === EModelEndpoint.chatGPTBrowser ||
|
||||
endpoint === EModelEndpoint.azureOpenAI ||
|
||||
endpoint === EModelEndpoint.gptPlugins
|
||||
) {
|
||||
endpoint = EModelEndpoint.openAI;
|
||||
}
|
||||
return (
|
||||
<div className="relative h-full">
|
||||
<div className="absolute left-0 right-0">{Header && Header}</div>
|
||||
<div className="flex h-full flex-col items-center justify-center">
|
||||
<div className="mb-3 h-[72px] w-[72px]">
|
||||
<div className="gizmo-shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
|
||||
<svg
|
||||
width="41"
|
||||
height="41"
|
||||
viewBox="0 0 41 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-2/3 w-2/3"
|
||||
role="img"
|
||||
>
|
||||
<text x="-9999" y="-9999">
|
||||
ChatGPT
|
||||
</text>
|
||||
<path
|
||||
d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
{icons[endpoint ?? 'unknown']({ size: 41, className: 'h-2/3 w-2/3' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-5 text-2xl font-medium dark:text-white">How can I help you today?</div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const MenuItem: FC<MenuItemProps> = ({
|
|||
<>
|
||||
<div
|
||||
role="menuitem"
|
||||
className="group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
|
||||
className="group m-1.5 flex max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
|
||||
tabIndex={-1}
|
||||
{...rest}
|
||||
onClick={() => onSelectEndpoint(endpoint)}
|
||||
|
|
@ -75,7 +75,9 @@ const MenuItem: FC<MenuItemProps> = ({
|
|||
className={cn(
|
||||
'invisible flex gap-x-1 group-hover:visible',
|
||||
selected ? 'visible' : '',
|
||||
expiryTime ? 'w-full rounded-lg p-2 hover:bg-gray-900' : '',
|
||||
expiryTime
|
||||
? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-900'
|
||||
: '',
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
|
@ -108,7 +110,7 @@ const MenuItem: FC<MenuItemProps> = ({
|
|||
)}
|
||||
{(!userProvidesKey || expiryTime) && (
|
||||
<div className="text-token-text-primary hidden gap-x-1 group-hover:flex ">
|
||||
<div className="">New Chat</div>
|
||||
{!userProvidesKey && <div className="">New Chat</div>}
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { FC } from 'react';
|
||||
import { EModelEndpoint, useGetEndpointsQuery } from 'librechat-data-provider';
|
||||
import { Close } from '@radix-ui/react-popover';
|
||||
import { EModelEndpoint, useGetEndpointsQuery, alternateName } from 'librechat-data-provider';
|
||||
import MenuSeparator from '../UI/MenuSeparator';
|
||||
import { alternateName } from '~/common';
|
||||
import MenuItem from './MenuItem';
|
||||
|
||||
const EndpointItems: FC<{
|
||||
|
|
@ -20,18 +20,20 @@ const EndpointItems: FC<{
|
|||
}
|
||||
const userProvidesKey = endpointsConfig?.[endpoint]?.userProvide;
|
||||
return (
|
||||
<div key={`endpoint-${endpoint}`}>
|
||||
<MenuItem
|
||||
key={`endpoint-item-${endpoint}`}
|
||||
title={alternateName[endpoint] || endpoint}
|
||||
value={endpoint}
|
||||
selected={selected === endpoint}
|
||||
data-testid={`endpoint-item-${endpoint}`}
|
||||
userProvidesKey={!!userProvidesKey}
|
||||
// description="With DALL·E, browsing and analysis"
|
||||
/>
|
||||
{i !== endpoints.length - 1 && <MenuSeparator />}
|
||||
</div>
|
||||
<Close asChild key={`endpoint-${endpoint}`}>
|
||||
<div key={`endpoint-${endpoint}`}>
|
||||
<MenuItem
|
||||
key={`endpoint-item-${endpoint}`}
|
||||
title={alternateName[endpoint] || endpoint}
|
||||
value={endpoint}
|
||||
selected={selected === endpoint}
|
||||
data-testid={`endpoint-item-${endpoint}`}
|
||||
userProvidesKey={!!userProvidesKey}
|
||||
// description="With DALL·E, browsing and analysis"
|
||||
/>
|
||||
{i !== endpoints.length - 1 && <MenuSeparator />}
|
||||
</div>
|
||||
</Close>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import { Content, Portal, Root } from '@radix-ui/react-popover';
|
||||
import { useGetEndpointsQuery } from 'librechat-data-provider';
|
||||
import { useGetEndpointsQuery, alternateName } from 'librechat-data-provider';
|
||||
import type { FC } from 'react';
|
||||
import EndpointItems from './Endpoints/MenuItems';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import TitleButton from './UI/TitleButton';
|
||||
import { alternateName } from '~/common';
|
||||
import { mapEndpoints } from '~/utils';
|
||||
|
||||
const EndpointsMenu: FC = () => {
|
||||
|
|
|
|||
|
|
@ -98,20 +98,20 @@ const PresetItems: FC<{
|
|||
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDeletePreset(preset);
|
||||
onChangePreset(preset);
|
||||
}}
|
||||
>
|
||||
<TrashIcon />
|
||||
<EditIcon />
|
||||
</button>
|
||||
<button
|
||||
className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onChangePreset(preset);
|
||||
e.stopPropagation();
|
||||
onDeletePreset(preset);
|
||||
}}
|
||||
>
|
||||
<EditIcon />
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
</MenuItem>
|
||||
|
|
|
|||
|
|
@ -10,13 +10,14 @@ import {
|
|||
import type { TPreset } from 'librechat-data-provider';
|
||||
import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
|
||||
import { useLocalize, useDefaultConvo, useNavigateToConvo } from '~/hooks';
|
||||
import { useChatContext, useToastContext } from '~/Providers';
|
||||
import { EditPresetDialog, PresetItems } from './Presets';
|
||||
import { cleanupPreset, cn } from '~/utils';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import store from '~/store';
|
||||
|
||||
const PresetsMenu: FC = () => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const { conversation, newConversation, setPreset } = useChatContext();
|
||||
const { navigateToConvo } = useNavigateToConvo();
|
||||
const getDefaultConversation = useDefaultConvo();
|
||||
|
|
@ -52,6 +53,12 @@ const PresetsMenu: FC = () => {
|
|||
return;
|
||||
}
|
||||
|
||||
showToast({
|
||||
message: localize('com_endpoint_preset_selected'),
|
||||
showIcon: false,
|
||||
duration: 750,
|
||||
});
|
||||
|
||||
if (
|
||||
modularEndpoints.has(endpoint ?? '') &&
|
||||
modularEndpoints.has(newPreset?.endpoint ?? '') &&
|
||||
|
|
@ -95,7 +102,7 @@ const PresetsMenu: FC = () => {
|
|||
)}
|
||||
id="presets-button"
|
||||
data-testid="presets-button"
|
||||
title={localize('com_ui_presets')}
|
||||
title={localize('com_endpoint_examples')}
|
||||
>
|
||||
<BookCopy className="icon-sm" id="presets-button" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Container Component
|
||||
const Container = ({ children }: { children: React.ReactNode }) => (
|
||||
<div className="text-message peer flex min-h-[20px] flex-col items-start gap-3 overflow-x-auto break-words peer-[.text-message]:mt-5">
|
||||
<div className="text-message flex min-h-[20px] flex-col items-start gap-3 overflow-x-auto [.text-message+&]:mt-5">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
42
client/src/components/Chat/Messages/Content/DialogImage.tsx
Normal file
42
client/src/components/Chat/Messages/Content/DialogImage.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
|
||||
export default function DialogImage({ src = '', width = 1920, height = 1080 }) {
|
||||
return (
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay
|
||||
className="radix-state-open:animate-show fixed inset-0 z-[100] flex items-center justify-center overflow-hidden bg-black/90 dark:bg-black/80"
|
||||
style={{ pointerEvents: 'auto' }}
|
||||
>
|
||||
<Dialog.Close asChild>
|
||||
<button
|
||||
className="absolute right-4 top-4 text-gray-50 transition hover:text-gray-200"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-5 w-5"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
<Dialog.Content
|
||||
className="radix-state-open:animate-contentShow relative max-h-[85vh] max-w-[90vw] shadow-xl focus:outline-none"
|
||||
tabIndex={-1}
|
||||
style={{ pointerEvents: 'auto', aspectRatio: height > width ? 1 / 1.75 : 1.75 / 1 }}
|
||||
>
|
||||
<img src={src} alt="Uploaded image" className="h-full w-full object-contain" />
|
||||
</Dialog.Content>
|
||||
</Dialog.Overlay>
|
||||
</Dialog.Portal>
|
||||
);
|
||||
}
|
||||
85
client/src/components/Chat/Messages/Content/Image.tsx
Normal file
85
client/src/components/Chat/Messages/Content/Image.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import React, { useState, useEffect, useRef, memo } from 'react';
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import DialogImage from './DialogImage';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const Image = ({
|
||||
imagePath,
|
||||
altText,
|
||||
height,
|
||||
width,
|
||||
}: // n,
|
||||
// i,
|
||||
{
|
||||
imagePath: string;
|
||||
altText: string;
|
||||
height: number;
|
||||
width: number;
|
||||
// n: number;
|
||||
// i: number;
|
||||
}) => {
|
||||
const prevImagePathRef = useRef<string | null>(null);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const handleImageLoad = () => setIsLoaded(true);
|
||||
const [minDisplayTimeElapsed, setMinDisplayTimeElapsed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout;
|
||||
if (isLoaded) {
|
||||
timer = setTimeout(() => setMinDisplayTimeElapsed(true), 150);
|
||||
}
|
||||
return () => clearTimeout(timer);
|
||||
}, [isLoaded]);
|
||||
|
||||
useEffect(() => {
|
||||
const prevImagePath = prevImagePathRef.current;
|
||||
if (prevImagePath && prevImagePath?.startsWith('blob:') && prevImagePath !== imagePath) {
|
||||
URL.revokeObjectURL(prevImagePath);
|
||||
}
|
||||
prevImagePathRef.current = imagePath;
|
||||
}, [imagePath]);
|
||||
// const makeSquare = n >= 3 && i < 2;
|
||||
|
||||
const placeholderHeight = height > width ? '900px' : '288px';
|
||||
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<div className="">
|
||||
<div className="relative mt-1 flex h-auto w-full max-w-lg items-center justify-center overflow-hidden bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400">
|
||||
<Dialog.Trigger asChild>
|
||||
<button type="button" aria-haspopup="dialog" aria-expanded="false">
|
||||
<LazyLoadImage
|
||||
// loading="lazy"
|
||||
alt={altText}
|
||||
onLoad={handleImageLoad}
|
||||
className={cn(
|
||||
'max-h-[900px] max-w-full opacity-100 transition-opacity duration-300',
|
||||
// n >= 3 && i < 2 ? 'aspect-square object-cover' : '',
|
||||
isLoaded && minDisplayTimeElapsed ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
src={imagePath}
|
||||
style={{
|
||||
height: isLoaded && minDisplayTimeElapsed ? 'auto' : placeholderHeight,
|
||||
width,
|
||||
color: 'transparent',
|
||||
}}
|
||||
placeholder={
|
||||
<div
|
||||
style={{
|
||||
height: isLoaded && minDisplayTimeElapsed ? 'auto' : placeholderHeight,
|
||||
width,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
</div>
|
||||
</div>
|
||||
<DialogImage src={imagePath} height={height} width={width} />
|
||||
</Dialog.Root>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(Image);
|
||||
|
|
@ -9,6 +9,7 @@ import EditMessage from './EditMessage';
|
|||
import Container from './Container';
|
||||
import Markdown from './Markdown';
|
||||
import { cn } from '~/utils';
|
||||
import Image from './Image';
|
||||
|
||||
const ErrorMessage = ({ text }: TText) => {
|
||||
const { logout } = useAuthContext();
|
||||
|
|
@ -27,22 +28,39 @@ const ErrorMessage = ({ text }: TText) => {
|
|||
};
|
||||
|
||||
// Display Message Component
|
||||
const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplayProps) => (
|
||||
<Container>
|
||||
<div
|
||||
className={cn(
|
||||
'markdown prose dark:prose-invert light w-full break-words',
|
||||
isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
|
||||
)}
|
||||
>
|
||||
{!isCreatedByUser ? (
|
||||
<Markdown content={text} message={message} showCursor={showCursor} />
|
||||
) : (
|
||||
<>{text}</>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplayProps) => {
|
||||
const imageFiles = message?.files
|
||||
? message.files.filter((file) => file.type.startsWith('image/'))
|
||||
: null;
|
||||
return (
|
||||
<Container>
|
||||
{imageFiles &&
|
||||
imageFiles.map((file, i) => (
|
||||
<Image
|
||||
key={file.file_id}
|
||||
imagePath={file.preview ?? file.filepath ?? ''}
|
||||
height={file.height ?? 1920}
|
||||
width={file.width ?? 1080}
|
||||
altText={file.filename ?? 'Uploaded Image'}
|
||||
// n={imageFiles.length}
|
||||
// i={i}
|
||||
/>
|
||||
))}
|
||||
<div
|
||||
className={cn(
|
||||
'markdown prose dark:prose-invert light w-full break-words',
|
||||
isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
|
||||
)}
|
||||
>
|
||||
{!isCreatedByUser ? (
|
||||
<Markdown content={text} message={message} showCursor={showCursor} />
|
||||
) : (
|
||||
<>{text}</>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
// Unfinished Message Component
|
||||
const UnfinishedMessage = () => (
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default function HoverButtons({
|
|||
<div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
|
||||
<button
|
||||
className={cn(
|
||||
'hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
|
||||
'hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
|
||||
isCreatedByUser ? '' : 'active',
|
||||
hideEditButton ? 'opacity-0' : '',
|
||||
isEditing ? 'active bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
|
||||
|
|
@ -68,8 +68,8 @@ export default function HoverButtons({
|
|||
</button>
|
||||
<button
|
||||
className={cn(
|
||||
'hover-button ml-0 flex items-center gap-1.5 rounded-md p-1 pl-0 text-xs hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
|
||||
isCreatedByUser ? '' : 'active',
|
||||
'ml-0 flex items-center gap-1.5 rounded-md p-1 pl-0 text-xs hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
|
||||
isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
|
||||
)}
|
||||
onClick={() => copyToClipboard(setIsCopied)}
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useEffect } from 'react';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { Plugin } from '~/components/Messages/Content';
|
||||
import MessageContent from './Content/MessageContent';
|
||||
import { Icon } from '~/components/Endpoints';
|
||||
|
|
@ -11,9 +12,11 @@ import { useChatContext } from '~/Providers';
|
|||
import MultiMessage from './MultiMessage';
|
||||
import HoverButtons from './HoverButtons';
|
||||
import SubRow from './SubRow';
|
||||
// import { cn } from '~/utils';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export default function Message(props: TMessageProps) {
|
||||
const autoScroll = useRecoilValue(store.autoScroll);
|
||||
const {
|
||||
message,
|
||||
scrollToBottom,
|
||||
|
|
@ -27,7 +30,6 @@ export default function Message(props: TMessageProps) {
|
|||
const {
|
||||
ask,
|
||||
regenerate,
|
||||
autoScroll,
|
||||
abortScroll,
|
||||
isSubmitting,
|
||||
conversation,
|
||||
|
|
@ -121,8 +123,8 @@ export default function Message(props: TMessageProps) {
|
|||
onWheel={handleScroll}
|
||||
onTouchMove={handleScroll}
|
||||
>
|
||||
<div className="m-auto justify-center p-4 py-2 text-base md:gap-6 md:py-6">
|
||||
<div className="final-completion group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:gap-6 md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
|
||||
<div className="m-auto justify-center p-4 py-2 text-base md:gap-6 ">
|
||||
<div className="} group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
|
||||
<div className="relative flex flex-shrink-0 flex-col items-end">
|
||||
<div>
|
||||
<div className="pt-0.5">
|
||||
|
|
@ -136,7 +138,12 @@ export default function Message(props: TMessageProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="agent-turn relative flex w-[calc(100%-50px)] w-full flex-col lg:w-[calc(100%-36px)]">
|
||||
<div
|
||||
className={cn('relative flex w-full flex-col', isCreatedByUser ? '' : 'agent-turn')}
|
||||
>
|
||||
<div className="select-none font-semibold">
|
||||
{isCreatedByUser ? 'You' : message.sender}
|
||||
</div>
|
||||
<div className="flex-col gap-1 md:gap-3">
|
||||
<div className="flex max-w-full flex-grow flex-col gap-0">
|
||||
{/* Legacy Plugins */}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import { useLayoutEffect, useState, useRef, useCallback } from 'react';
|
|||
import type { ReactNode } from 'react';
|
||||
import type { TMessage } from 'librechat-data-provider';
|
||||
import ScrollToBottom from '~/components/Messages/ScrollToBottom';
|
||||
import { useScreenshot, useScrollToRef } from '~/hooks';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import { useChatContext } from '~/Providers';
|
||||
import MultiMessage from './MultiMessage';
|
||||
import { useScrollToRef } from '~/hooks';
|
||||
|
||||
export default function MessagesView({
|
||||
messagesTree: _messagesTree,
|
||||
|
|
@ -21,8 +21,7 @@ export default function MessagesView({
|
|||
const { conversation, showPopover, setAbortScroll } = useChatContext();
|
||||
const { conversationId } = conversation ?? {};
|
||||
|
||||
// TODO: screenshot target ref
|
||||
// const { screenshotTargetRef } = useScreenshot();
|
||||
const { screenshotTargetRef } = useScreenshot();
|
||||
|
||||
const checkIfAtBottom = useCallback(() => {
|
||||
if (!scrollableRef.current) {
|
||||
|
|
@ -82,26 +81,28 @@ export default function MessagesView({
|
|||
) : (
|
||||
<>
|
||||
{Header && Header}
|
||||
<MultiMessage
|
||||
key={conversationId} // avoid internal state mixture
|
||||
messageId={conversationId ?? null}
|
||||
messagesTree={_messagesTree}
|
||||
scrollToBottom={scrollToBottom}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
currentEditId={currentEditId ?? null}
|
||||
/>
|
||||
<CSSTransition
|
||||
in={showScrollButton}
|
||||
timeout={400}
|
||||
classNames="scroll-down"
|
||||
unmountOnExit={false}
|
||||
// appear
|
||||
>
|
||||
{() =>
|
||||
showScrollButton &&
|
||||
!showPopover && <ScrollToBottom scrollHandler={handleSmoothToRef} />
|
||||
}
|
||||
</CSSTransition>
|
||||
<div ref={screenshotTargetRef}>
|
||||
<MultiMessage
|
||||
key={conversationId} // avoid internal state mixture
|
||||
messageId={conversationId ?? null}
|
||||
messagesTree={_messagesTree}
|
||||
scrollToBottom={scrollToBottom}
|
||||
setCurrentEditId={setCurrentEditId}
|
||||
currentEditId={currentEditId ?? null}
|
||||
/>
|
||||
<CSSTransition
|
||||
in={showScrollButton}
|
||||
timeout={400}
|
||||
classNames="scroll-down"
|
||||
unmountOnExit={false}
|
||||
// appear
|
||||
>
|
||||
{() =>
|
||||
showScrollButton &&
|
||||
!showPopover && <ScrollToBottom scrollHandler={handleSmoothToRef} />
|
||||
}
|
||||
</CSSTransition>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
|
|
|
|||
17
client/src/components/Chat/Presentation.tsx
Normal file
17
client/src/components/Chat/Presentation.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import DragDropOverlay from './Input/Files/DragDropOverlay';
|
||||
import { useDragHelpers } from '~/hooks';
|
||||
|
||||
export default function Presentation({ children }: { children: React.ReactNode }) {
|
||||
const { isOver, canDrop, drop } = useDragHelpers();
|
||||
const isActive = canDrop && isOver;
|
||||
return (
|
||||
<div ref={drop} className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800">
|
||||
<div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-0 dark:bg-gray-800">
|
||||
<div className="flex h-full flex-col" role="presentation" tabIndex={0}>
|
||||
{children}
|
||||
{isActive && <DragDropOverlay />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -38,7 +38,12 @@ export default function Conversation({ conversation, retainView, toggleNav, i })
|
|||
|
||||
// set conversation to the new conversation
|
||||
if (conversation?.endpoint === 'gptPlugins') {
|
||||
const lastSelectedTools = JSON.parse(localStorage.getItem('lastSelectedTools') ?? '') || [];
|
||||
let lastSelectedTools = [];
|
||||
try {
|
||||
lastSelectedTools = JSON.parse(localStorage.getItem('lastSelectedTools') ?? '') ?? [];
|
||||
} catch (e) {
|
||||
// console.error(e);
|
||||
}
|
||||
navigateToConvo({ ...conversation, tools: lastSelectedTools });
|
||||
} else {
|
||||
navigateToConvo(conversation);
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
placeholder={localize('com_endpoint_prompt_prefix_placeholder')}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -122,7 +122,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
<HoverCard openDelay={300}>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
|
||||
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_top_p')}{' '}
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', '0.7')})
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export default function Settings({ conversation, setOption, readonly }: TSetting
|
|||
placeholder={localize('com_endpoint_bing_context_placeholder')}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2',
|
||||
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2',
|
||||
)}
|
||||
/>
|
||||
<small className="mb-5 text-black dark:text-white">{`${localize(
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
|
|||
placeholder="Set example input. Example is ignored if empty."
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex max-h-[300px] min-h-[75px] w-full resize-none px-3 py-2 ',
|
||||
'flex max-h-[138px] min-h-[75px] w-full resize-none px-3 py-2 ',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
placeholder={localize('com_endpoint_prompt_prefix_placeholder')}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
className={cn(
|
||||
defaultTextProps,
|
||||
'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
|
||||
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import { useState } from 'react';
|
||||
import { useGetEndpointsQuery } from 'librechat-data-provider';
|
||||
import { useGetEndpointsQuery, alternateName } from 'librechat-data-provider';
|
||||
import { Settings } from 'lucide-react';
|
||||
import { DropdownMenuRadioItem } from '~/components';
|
||||
import { Icon } from '~/components/Endpoints';
|
||||
import { SetKeyDialog } from '../SetKeyDialog';
|
||||
import { alternateName } from '~/common';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import { EModelEndpoint } from 'librechat-data-provider';
|
||||
import { EModelEndpoint, alternateName } from 'librechat-data-provider';
|
||||
import type { TDialogProps } from '~/common';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { RevokeKeysButton } from '~/components/Nav';
|
||||
|
|
@ -7,7 +7,6 @@ import { Dialog, Dropdown } from '~/components/ui';
|
|||
import { useUserKey, useLocalize } from '~/hooks';
|
||||
import GoogleConfig from './GoogleConfig';
|
||||
import OpenAIConfig from './OpenAIConfig';
|
||||
import { alternateName } from '~/common';
|
||||
import OtherConfig from './OtherConfig';
|
||||
import HelpText from './HelpText';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import { useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { EModelEndpoint, alternateName } from 'librechat-data-provider';
|
||||
import type { TPreset } from 'librechat-data-provider';
|
||||
import { EModelEndpoint } from 'librechat-data-provider';
|
||||
import EndpointOptionsDialog from '../Endpoints/EndpointOptionsDialog';
|
||||
import { Plugin } from '~/components/svg';
|
||||
import { alternateName } from '~/common';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import { useState, forwardRef } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { Download } from 'lucide-react';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
import ExportModel from './ExportModel';
|
||||
|
||||
import store from '~/store';
|
||||
import ExportModal from './ExportModal';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils/';
|
||||
import store from '~/store';
|
||||
|
||||
const ExportConversation = forwardRef(() => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
|
@ -38,7 +36,7 @@ const ExportConversation = forwardRef(() => {
|
|||
{localize('com_nav_export_conversation')}
|
||||
</button>
|
||||
|
||||
<ExportModel open={open} onOpenChange={setOpen} />
|
||||
<ExportModal open={open} onOpenChange={setOpen} />
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,27 +1,33 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useRecoilValue, useRecoilCallback } from 'recoil';
|
||||
import filenamify from 'filenamify';
|
||||
import exportFromJSON from 'export-from-json';
|
||||
import download from 'downloadjs';
|
||||
import { Dialog, DialogButton, Input, Label, Checkbox, Dropdown } from '~/components/ui/';
|
||||
import filenamify from 'filenamify';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
import { useEffect, useState } from 'react';
|
||||
import exportFromJSON from 'export-from-json';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { useGetMessagesByConvoId } from 'librechat-data-provider';
|
||||
import { Dialog, DialogButton, Input, Label, Checkbox, Dropdown } from '~/components/ui/';
|
||||
import { cn, defaultTextProps, removeFocusOutlines, cleanupPreset } from '~/utils/';
|
||||
import { useScreenshot, useLocalize } from '~/hooks';
|
||||
import { buildTree } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export default function ExportModel({ open, onOpenChange }) {
|
||||
export default function ExportModal({ open, onOpenChange, conversation }) {
|
||||
const { captureScreenshot } = useScreenshot();
|
||||
const localize = useLocalize();
|
||||
|
||||
const [filename, setFileName] = useState('');
|
||||
const [type, setType] = useState('');
|
||||
const [type, setType] = useState('Select a file type');
|
||||
|
||||
const [includeOptions, setIncludeOptions] = useState(true);
|
||||
const [exportBranches, setExportBranches] = useState(false);
|
||||
const [recursive, setRecursive] = useState(true);
|
||||
|
||||
const conversation = useRecoilValue(store.conversation) || {};
|
||||
const messagesTree = useRecoilValue(store.messagesTree) || [];
|
||||
const { data: messagesTree = null } = useGetMessagesByConvoId(conversation.conversationId ?? '', {
|
||||
select: (data) => {
|
||||
const dataTree = buildTree(data, false);
|
||||
return dataTree?.length === 0 ? null : dataTree ?? null;
|
||||
},
|
||||
});
|
||||
|
||||
const getSiblingIdx = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
|
|
@ -357,22 +363,11 @@ export default function ExportModel({ open, onOpenChange }) {
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 flex flex-col items-start justify-start gap-2">
|
||||
<div className="col-span-1 flex w-full flex-col items-start justify-start gap-2">
|
||||
<Label htmlFor="type" className="text-left text-sm font-medium">
|
||||
{localize('com_nav_export_type')}
|
||||
</Label>
|
||||
<Dropdown
|
||||
id="type"
|
||||
value={type}
|
||||
onChange={_setType}
|
||||
options={typeOptions}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex h-10 max-h-10 w-full resize-none',
|
||||
removeFocusOutlines,
|
||||
)}
|
||||
containerClassName="flex w-full resize-none"
|
||||
/>
|
||||
<Dropdown id="type" value={type} onChange={_setType} options={typeOptions} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid w-full gap-6 sm:grid-cols-2">
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
export { default as ExportConversation } from './ExportConversation';
|
||||
export { default as ExportModel } from './ExportModel';
|
||||
export { default as ExportModal } from './ExportModal';
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
import { Download } from 'lucide-react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { Fragment, useState } from 'react';
|
||||
import { Fragment, useState, memo } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider';
|
||||
import type { TConversation } from 'librechat-data-provider';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { ExportModel } from './ExportConversation';
|
||||
import Settings from './Settings';
|
||||
import NavLink from './NavLink';
|
||||
import Logout from './Logout';
|
||||
import { ExportModal } from './ExportConversation';
|
||||
import { LinkIcon, GearIcon } from '~/components';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import Settings from './Settings';
|
||||
import NavLink from './NavLink';
|
||||
import Logout from './Logout';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
export default function NavLinks() {
|
||||
function NavLinks() {
|
||||
const localize = useLocalize();
|
||||
const location = useLocation();
|
||||
const { user, isAuthenticated } = useAuthContext();
|
||||
const { data: startupConfig } = useGetStartupConfig();
|
||||
const balanceQuery = useGetUserBalance({
|
||||
|
|
@ -23,14 +25,23 @@ export default function NavLinks() {
|
|||
});
|
||||
const [showExports, setShowExports] = useState(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const localize = useLocalize();
|
||||
|
||||
const conversation = useRecoilValue(store.conversation) ?? ({} as TConversation);
|
||||
let conversation;
|
||||
const activeConvo = useRecoilValue(store.conversationByIndex(0));
|
||||
const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
|
||||
if (location.state?.from?.pathname.includes('/chat')) {
|
||||
conversation = globalConvo;
|
||||
} else {
|
||||
conversation = activeConvo;
|
||||
}
|
||||
|
||||
const exportable =
|
||||
conversation?.conversationId &&
|
||||
conversation?.conversationId !== 'new' &&
|
||||
conversation?.conversationId !== 'search';
|
||||
conversation &&
|
||||
conversation.conversationId &&
|
||||
conversation.conversationId !== 'new' &&
|
||||
conversation.conversationId !== 'search';
|
||||
|
||||
console.log('NavLinks', conversation, exportable);
|
||||
|
||||
const clickHandler = () => {
|
||||
if (exportable) {
|
||||
|
|
@ -124,8 +135,12 @@ export default function NavLinks() {
|
|||
</>
|
||||
)}
|
||||
</Menu>
|
||||
{showExports && <ExportModel open={showExports} onOpenChange={setShowExports} />}
|
||||
{showExports && (
|
||||
<ExportModal open={showExports} onOpenChange={setShowExports} conversation={conversation} />
|
||||
)}
|
||||
{showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(NavLinks);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
import { cn } from '~/utils';
|
||||
|
||||
export default function MinimalPlugin({ className = '' }) {
|
||||
export default function MinimalPlugin({ size, className = 'icon-md' }) {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={cn('icon-md', className)}
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
|
|
|||
|
|
@ -37,7 +37,11 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
|
|||
const defaultSelect =
|
||||
'bg-gray-900 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';
|
||||
return (
|
||||
<DialogContent ref={ref} className={cn('shadow-2xl dark:bg-gray-900', className || '')}>
|
||||
<DialogContent
|
||||
ref={ref}
|
||||
className={cn('shadow-2xl dark:bg-gray-900', className || '')}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DialogHeader className={cn('sm:pb-2', headerClassName ?? '')}>
|
||||
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
|
||||
{title}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ const FileUpload: React.FC<FileUploadProps> = ({
|
|||
if (onClick) {
|
||||
onClick();
|
||||
}
|
||||
// necessary to reset the input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue