mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 00:23:17 +00:00
Merge pull request #1708 from ManishMadan2882/main
Refactor(fe): Conversation
This commit is contained in:
Alex
@@ -1,6 +1,6 @@
|
||||
import { Fragment } from 'react';
|
||||
import DocsGPT3 from './assets/cute_docsgpt3.svg';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function Hero({
|
||||
handleQuestion,
|
||||
}: {
|
||||
@@ -17,40 +17,41 @@ export default function Hero({
|
||||
header: string;
|
||||
query: string;
|
||||
}>;
|
||||
return (
|
||||
<div
|
||||
className={`pt-20 sm:pt-0 pb-6 sm:pb-12 flex h-full w-full flex-col text-black-1000 dark:text-bright-gray sm:w-full px-2 sm:px-0`}
|
||||
>
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<div className="flex items-center">
|
||||
<span className="p-0 text-4xl font-semibold">DocsGPT</span>
|
||||
<img className="mb-1 inline w-14 p-0" src={DocsGPT3} alt="docsgpt" />
|
||||
</div>
|
||||
|
||||
<div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col text-black-1000 dark:text-bright-gray items-center justify-between">
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col items-center justify-center flex-grow pt-8 md:pt-0">
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-4xl font-semibold">DocsGPT</span>
|
||||
<img className="mb-1 inline w-14" src={DocsGPT3} alt="docsgpt" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-16 grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:mb-0 md:text-sm lg:grid-cols-2">
|
||||
{demos?.map(
|
||||
(demo: { header: string; query: string }, key: number) =>
|
||||
demo.header &&
|
||||
demo.query && (
|
||||
<Fragment key={key}>
|
||||
|
||||
{/* Demo Buttons Section */}
|
||||
<div className="w-full max-w-full mb-8 md:mb-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-3 md:gap-4 text-xs">
|
||||
{demos?.map(
|
||||
(demo: { header: string; query: string }, key: number) =>
|
||||
demo.header &&
|
||||
demo.query && (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => handleQuestion({ question: demo.query })}
|
||||
className={`w-full rounded-full border bg-transparent px-6 py-4 text-left min-w-11/12 sm:min-w-[362px] focus:outline-none
|
||||
className="w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors
|
||||
border-dark-gray text-just-black hover:bg-cultured
|
||||
dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green`}
|
||||
dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green"
|
||||
>
|
||||
<p className="mb-1 font-semibold text-black-1000 dark:text-bright-gray">
|
||||
<p className="mb-2 font-semibold text-black-1000 dark:text-bright-gray">
|
||||
{demo.header}
|
||||
</p>
|
||||
<span className="text-gray-700 dark:text-gray-300 opacity-60">
|
||||
<span className="text-gray-700 dark:text-gray-300 opacity-60 line-clamp-2">
|
||||
{demo.query}
|
||||
</span>
|
||||
</button>
|
||||
</Fragment>
|
||||
),
|
||||
)}
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -35,7 +35,7 @@ const Input = ({
|
||||
<div className={`relative ${className}`}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
className={`h-[42px] w-full rounded-full px-3 py-1
|
||||
className={`peer h-[42px] w-full rounded-full px-3 py-1
|
||||
bg-transparent outline-none
|
||||
text-jet dark:text-bright-gray
|
||||
placeholder-transparent
|
||||
|
||||
94
frontend/src/components/MessageInput.tsx
Normal file
94
frontend/src/components/MessageInput.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDarkTheme } from '../hooks';
|
||||
import Send from '../assets/send.svg';
|
||||
import SendDark from '../assets/send_dark.svg';
|
||||
import SpinnerDark from '../assets/spinner-dark.svg';
|
||||
import Spinner from '../assets/spinner.svg';
|
||||
|
||||
interface MessageInputProps {
|
||||
value: string;
|
||||
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
||||
onSubmit: () => void;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export default function MessageInput({
|
||||
value,
|
||||
onChange,
|
||||
onSubmit,
|
||||
loading,
|
||||
}: MessageInputProps) {
|
||||
const { t } = useTranslation();
|
||||
const [isDarkTheme] = useDarkTheme();
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const handleInput = () => {
|
||||
if (inputRef.current) {
|
||||
if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
|
||||
else inputRef.current.style.height = '64px';
|
||||
inputRef.current.style.height = `${Math.min(
|
||||
inputRef.current.scrollHeight,
|
||||
96,
|
||||
)}px`;
|
||||
}
|
||||
};
|
||||
|
||||
// Focus the textarea and set initial height on mount.
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
handleInput();
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
if (inputRef.current) {
|
||||
inputRef.current.value = '';
|
||||
handleInput();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full mx-2 items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-charleston-green-3">
|
||||
<label htmlFor="message-input" className="sr-only">
|
||||
{t('inputPlaceholder')}
|
||||
</label>
|
||||
<textarea
|
||||
id="message-input"
|
||||
ref={inputRef}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
tabIndex={1}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
className="inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-lotion dark:bg-charleston-green-3 py-5 text-base leading-tight opacity-100 focus:outline-none dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 px-6"
|
||||
onInput={handleInput}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-label={t('inputPlaceholder')}
|
||||
/>
|
||||
{loading ? (
|
||||
<img
|
||||
src={isDarkTheme ? SpinnerDark : Spinner}
|
||||
className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
|
||||
alt={t('loading')}
|
||||
/>
|
||||
) : (
|
||||
<div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
|
||||
<button
|
||||
onClick={onSubmit}
|
||||
aria-label={t('send')}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
className="ml-[4px] h-6 w-6 text-white filter dark:invert-[0.45] invert-[0.35]"
|
||||
src={isDarkTheme ? SendDark : Send}
|
||||
alt={t('send')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import Trash from '../assets/trash.svg';
|
||||
import Arrow2 from '../assets/dropdown-arrow.svg';
|
||||
import { Doc } from '../models/misc';
|
||||
import { Doc, ActiveState } from '../models/misc';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ConfirmationModal from '../modals/ConfirmationModal';
|
||||
|
||||
type Props = {
|
||||
options: Doc[] | null;
|
||||
selectedDocs: Doc | null;
|
||||
@@ -30,6 +32,10 @@ function SourceDropdown({
|
||||
import.meta.env.VITE_EMBEDDINGS_NAME ||
|
||||
'huggingface_sentence-transformers/all-mpnet-base-v2';
|
||||
|
||||
const [deleteModalState, setDeleteModalState] =
|
||||
useState<ActiveState>('INACTIVE');
|
||||
const [documentToDelete, setDocumentToDelete] = useState<Doc | null>(null);
|
||||
|
||||
const handleEmptyDocumentSelect = () => {
|
||||
dispatch(setSelectedDocs(null));
|
||||
setIsDocsListOpen(false);
|
||||
@@ -50,6 +56,25 @@ function SourceDropdown({
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const confirmDelete = (option: Doc) => {
|
||||
setDocumentToDelete(option);
|
||||
setDeleteModalState('ACTIVE');
|
||||
};
|
||||
|
||||
const handleConfirmedDelete = () => {
|
||||
if (documentToDelete) {
|
||||
handleDeleteClick(documentToDelete);
|
||||
setDeleteModalState('INACTIVE');
|
||||
setDocumentToDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelDelete = () => {
|
||||
setDeleteModalState('INACTIVE');
|
||||
setDocumentToDelete(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-5/6 rounded-3xl" ref={dropdownRef}>
|
||||
<button
|
||||
@@ -76,7 +101,7 @@ function SourceDropdown({
|
||||
/>
|
||||
</button>
|
||||
{isDocsListOpen && (
|
||||
<div className="absolute left-0 right-0 z-50 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
|
||||
<div className="absolute left-0 right-0 z-20 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
|
||||
{options ? (
|
||||
options.map((option: any, index: number) => {
|
||||
if (option.model === embeddingsName) {
|
||||
@@ -106,7 +131,7 @@ function SourceDropdown({
|
||||
id={`img-${index}`}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
handleDeleteClick(option);
|
||||
confirmDelete(option);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@@ -132,6 +157,17 @@ function SourceDropdown({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ConfirmationModal
|
||||
message={t('settings.documents.deleteWarning', {
|
||||
name: documentToDelete?.name,
|
||||
})}
|
||||
modalState={deleteModalState}
|
||||
setModalState={setDeleteModalState}
|
||||
handleSubmit={handleConfirmedDelete}
|
||||
handleCancel={handleCancelDelete}
|
||||
submitLabel={t('convTile.delete')}
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,14 @@
|
||||
import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Hero from '../Hero';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import DragFileUpload from '../assets/DragFileUpload.svg';
|
||||
import ArrowDown from '../assets/arrow-down.svg';
|
||||
import newChatIcon from '../assets/openNewChat.svg';
|
||||
import Send from '../assets/send.svg';
|
||||
import SendDark from '../assets/send_dark.svg';
|
||||
import ShareIcon from '../assets/share.svg';
|
||||
import SpinnerDark from '../assets/spinner-dark.svg';
|
||||
import Spinner from '../assets/spinner.svg';
|
||||
import RetryIcon from '../components/RetryIcon';
|
||||
import { useDarkTheme, useMediaQuery } from '../hooks';
|
||||
import { useMediaQuery } from '../hooks';
|
||||
import { ShareConversationModal } from '../modals/ShareConversationModal';
|
||||
import { selectConversationId } from '../preferences/preferenceSlice';
|
||||
import { AppDispatch } from '../store';
|
||||
import ConversationBubble from './ConversationBubble';
|
||||
import { handleSendFeedback } from './conversationHandlers';
|
||||
import { FEEDBACK, Query } from './conversationModels';
|
||||
import {
|
||||
@@ -32,19 +23,16 @@ import {
|
||||
} from './conversationSlice';
|
||||
import Upload from '../upload/Upload';
|
||||
import { ActiveState } from '../models/misc';
|
||||
import ConversationMessages from './ConversationMessages';
|
||||
import MessageInput from '../components/MessageInput';
|
||||
|
||||
export default function Conversation() {
|
||||
const queries = useSelector(selectQueries);
|
||||
const navigate = useNavigate();
|
||||
const status = useSelector(selectStatus);
|
||||
const conversationId = useSelector(selectConversationId);
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const conversationRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [isDarkTheme] = useDarkTheme();
|
||||
const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
|
||||
const [input, setInput] = useState('');
|
||||
const fetchStream = useRef<any>(null);
|
||||
const [eventInterrupt, setEventInterrupt] = useState(false);
|
||||
const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
|
||||
const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
|
||||
const { t } = useTranslation();
|
||||
@@ -91,23 +79,6 @@ export default function Conversation() {
|
||||
},
|
||||
});
|
||||
|
||||
const handleUserInterruption = () => {
|
||||
if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
|
||||
};
|
||||
useEffect(() => {
|
||||
!eventInterrupt && scrollIntoView();
|
||||
if (queries.length == 0) {
|
||||
resetConversation();
|
||||
}
|
||||
}, [queries.length, queries[queries.length - 1]]);
|
||||
|
||||
useEffect(() => {
|
||||
const element = document.getElementById('inputbox') as HTMLTextAreaElement;
|
||||
if (element) {
|
||||
element.focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (queries.length) {
|
||||
queries[queries.length - 1].error && setLastQueryReturnedErr(true);
|
||||
@@ -115,19 +86,6 @@ export default function Conversation() {
|
||||
}
|
||||
}, [queries[queries.length - 1]]);
|
||||
|
||||
const scrollIntoView = () => {
|
||||
if (!conversationRef?.current || eventInterrupt) return;
|
||||
|
||||
if (status === 'idle' || !queries[queries.length - 1].response) {
|
||||
conversationRef.current.scrollTo({
|
||||
behavior: 'smooth',
|
||||
top: conversationRef.current.scrollHeight,
|
||||
});
|
||||
} else {
|
||||
conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuestion = ({
|
||||
question,
|
||||
isRetry = false,
|
||||
@@ -146,7 +104,6 @@ export default function Conversation() {
|
||||
} else {
|
||||
question = question.trim();
|
||||
if (question === '') return;
|
||||
setEventInterrupt(false);
|
||||
!isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
|
||||
fetchStream.current = dispatch(fetchAnswer({ question }));
|
||||
}
|
||||
@@ -181,14 +138,14 @@ export default function Conversation() {
|
||||
) => {
|
||||
if (updated === true) {
|
||||
handleQuestion({ question: updatedQuestion as string, updated, indx });
|
||||
} else if (inputRef.current?.value && status !== 'loading') {
|
||||
} else if (input && status !== 'loading') {
|
||||
if (lastQueryReturnedErr) {
|
||||
// update last failed query with new prompt
|
||||
dispatch(
|
||||
updateQuery({
|
||||
index: queries.length - 1,
|
||||
query: {
|
||||
prompt: inputRef.current.value,
|
||||
prompt: input,
|
||||
},
|
||||
}),
|
||||
);
|
||||
@@ -197,10 +154,9 @@ export default function Conversation() {
|
||||
isRetry: true,
|
||||
});
|
||||
} else {
|
||||
handleQuestion({ question: inputRef.current.value });
|
||||
handleQuestion({ question: input });
|
||||
}
|
||||
inputRef.current.value = '';
|
||||
handleInput();
|
||||
setInput('');
|
||||
}
|
||||
};
|
||||
const resetConversation = () => {
|
||||
@@ -215,84 +171,8 @@ export default function Conversation() {
|
||||
if (queries && queries.length > 0) resetConversation();
|
||||
};
|
||||
|
||||
const prepResponseView = (query: Query, index: number) => {
|
||||
let responseView;
|
||||
if (query.response) {
|
||||
responseView = (
|
||||
<ConversationBubble
|
||||
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
|
||||
key={`${index}ANSWER`}
|
||||
message={query.response}
|
||||
type={'ANSWER'}
|
||||
sources={query.sources}
|
||||
toolCalls={query.tool_calls}
|
||||
feedback={query.feedback}
|
||||
handleFeedback={(feedback: FEEDBACK) =>
|
||||
handleFeedback(query, feedback, index)
|
||||
}
|
||||
></ConversationBubble>
|
||||
);
|
||||
} else if (query.error) {
|
||||
const retryBtn = (
|
||||
<button
|
||||
className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
|
||||
disabled={status === 'loading'}
|
||||
onClick={() => {
|
||||
handleQuestion({
|
||||
question: queries[queries.length - 1].prompt,
|
||||
isRetry: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<RetryIcon
|
||||
width={isMobile ? 12 : 12} // change the width and height according to device size if necessary
|
||||
height={isMobile ? 12 : 12}
|
||||
fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
|
||||
stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
|
||||
strokeWidth={10}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
responseView = (
|
||||
<ConversationBubble
|
||||
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
|
||||
key={`${index}ERROR`}
|
||||
message={query.error}
|
||||
type="ERROR"
|
||||
retryBtn={retryBtn}
|
||||
></ConversationBubble>
|
||||
);
|
||||
}
|
||||
return responseView;
|
||||
};
|
||||
|
||||
const handleInput = () => {
|
||||
if (inputRef.current) {
|
||||
if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
|
||||
else inputRef.current.style.height = '64px';
|
||||
inputRef.current.style.height = `${Math.min(
|
||||
inputRef.current.scrollHeight,
|
||||
96,
|
||||
)}px`;
|
||||
}
|
||||
};
|
||||
const checkScroll = () => {
|
||||
const el = conversationRef.current;
|
||||
if (!el) return;
|
||||
const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
|
||||
setHasScrolledToLast(isBottom);
|
||||
};
|
||||
useEffect(() => {
|
||||
handleInput();
|
||||
window.addEventListener('resize', handleInput);
|
||||
conversationRef.current?.addEventListener('scroll', checkScroll);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleInput);
|
||||
conversationRef.current?.removeEventListener('scroll', checkScroll);
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<div className="flex flex-col gap-1 h-full justify-end ">
|
||||
<div className="flex flex-col gap-1 h-full justify-end">
|
||||
{conversationId && queries.length > 0 && (
|
||||
<div className="absolute top-4 right-20">
|
||||
<div className="flex mt-2 items-center gap-4">
|
||||
@@ -327,113 +207,39 @@ export default function Conversation() {
|
||||
</button>
|
||||
</div>
|
||||
{isShareModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/50 dark:bg-gray-alpha" />
|
||||
<div className="relative z-50 w-full max-w-md rounded-3xl">
|
||||
<ShareConversationModal
|
||||
close={() => {
|
||||
setShareModalState(false);
|
||||
}}
|
||||
conversationId={conversationId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ShareConversationModal
|
||||
close={() => {
|
||||
setShareModalState(false);
|
||||
}}
|
||||
conversationId={conversationId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
ref={conversationRef}
|
||||
onWheel={handleUserInterruption}
|
||||
onTouchMove={handleUserInterruption}
|
||||
className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12"
|
||||
>
|
||||
{queries.length > 0 && !hasScrolledToLast && (
|
||||
<button
|
||||
onClick={scrollIntoView}
|
||||
aria-label="scroll to bottom"
|
||||
className="fixed bottom-40 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
|
||||
>
|
||||
<img
|
||||
src={ArrowDown}
|
||||
alt="arrow down"
|
||||
className="h-4 w-4 opacity-50 md:h-5 md:w-5"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{queries.length > 0 ? (
|
||||
<div className="w-full md:w-8/12">
|
||||
{queries.map((query, index) => {
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
<ConversationBubble
|
||||
className={'first:mt-5'}
|
||||
key={`${index}QUESTION`}
|
||||
message={query.prompt}
|
||||
type="QUESTION"
|
||||
handleUpdatedQuestionSubmission={handleQuestionSubmission}
|
||||
questionNumber={index}
|
||||
sources={query.sources}
|
||||
></ConversationBubble>
|
||||
<ConversationMessages
|
||||
handleQuestion={handleQuestion}
|
||||
handleQuestionSubmission={handleQuestionSubmission}
|
||||
handleFeedback={handleFeedback}
|
||||
queries={queries}
|
||||
status={status}
|
||||
/>
|
||||
|
||||
{prepResponseView(query, index)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<Hero handleQuestion={handleQuestion} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-[calc(min(742px,92%))] h-auto py-1">
|
||||
<div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1300px] h-auto py-1">
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className="flex w-full items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-charleston-green-3"
|
||||
className="flex w-full items-center rounded-[40px]"
|
||||
>
|
||||
<label htmlFor="file-upload" className="sr-only">
|
||||
{t('modals.uploadDoc.label')}
|
||||
</label>
|
||||
<input {...getInputProps()} id="file-upload" />
|
||||
<label htmlFor="message-input" className="sr-only">
|
||||
{t('inputPlaceholder')}
|
||||
</label>
|
||||
<textarea
|
||||
id="message-input"
|
||||
ref={inputRef}
|
||||
tabIndex={1}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
className={`inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-lotion dark:bg-charleston-green-3 py-5 text-base leading-tight opacity-100 focus:outline-none dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50`}
|
||||
onInput={handleInput}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleQuestionSubmission();
|
||||
}
|
||||
}}
|
||||
aria-label={t('inputPlaceholder')}
|
||||
></textarea>
|
||||
{status === 'loading' ? (
|
||||
<img
|
||||
src={isDarkTheme ? SpinnerDark : Spinner}
|
||||
className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
|
||||
alt={t('loading')}
|
||||
/>
|
||||
) : (
|
||||
<div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
|
||||
<button
|
||||
onClick={() => handleQuestionSubmission()}
|
||||
aria-label={t('send')}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
className="ml-[4px] h-6 w-6 text-white filter dark:invert-[0.45] invert-[0.35]"
|
||||
src={isDarkTheme ? SendDark : Send}
|
||||
alt={t('send')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<MessageInput
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onSubmit={handleQuestionSubmission}
|
||||
loading={status === 'loading'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
|
||||
|
||||
180
frontend/src/conversation/ConversationMessages.tsx
Normal file
180
frontend/src/conversation/ConversationMessages.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ConversationBubble from './ConversationBubble';
|
||||
import Hero from '../Hero';
|
||||
import { FEEDBACK, Query, Status } from './conversationModels';
|
||||
import ArrowDown from '../assets/arrow-down.svg';
|
||||
import RetryIcon from '../components/RetryIcon';
|
||||
import { useDarkTheme } from '../hooks';
|
||||
|
||||
interface ConversationMessagesProps {
|
||||
handleQuestion: (params: {
|
||||
question: string;
|
||||
isRetry?: boolean;
|
||||
updated?: boolean | null;
|
||||
indx?: number;
|
||||
}) => void;
|
||||
handleQuestionSubmission: (
|
||||
updatedQuestion?: string,
|
||||
updated?: boolean,
|
||||
indx?: number,
|
||||
) => void;
|
||||
handleFeedback?: (query: Query, feedback: FEEDBACK, index: number) => void;
|
||||
queries: Query[];
|
||||
status: Status;
|
||||
}
|
||||
|
||||
export default function ConversationMessages({
|
||||
handleQuestion,
|
||||
handleQuestionSubmission,
|
||||
queries,
|
||||
status,
|
||||
handleFeedback,
|
||||
}: ConversationMessagesProps) {
|
||||
const [isDarkTheme] = useDarkTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const conversationRef = useRef<HTMLDivElement>(null);
|
||||
const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
|
||||
const [eventInterrupt, setEventInterrupt] = useState(false);
|
||||
|
||||
const handleUserInterruption = () => {
|
||||
if (!eventInterrupt && status === 'loading') {
|
||||
setEventInterrupt(true);
|
||||
}
|
||||
};
|
||||
|
||||
const scrollIntoView = () => {
|
||||
if (!conversationRef?.current || eventInterrupt) return;
|
||||
|
||||
if (status === 'idle' || !queries[queries.length - 1]?.response) {
|
||||
conversationRef.current.scrollTo({
|
||||
behavior: 'smooth',
|
||||
top: conversationRef.current.scrollHeight,
|
||||
});
|
||||
} else {
|
||||
conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
const checkScroll = () => {
|
||||
const el = conversationRef.current;
|
||||
if (!el) return;
|
||||
const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
|
||||
setHasScrolledToLast(isBottom);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
!eventInterrupt && scrollIntoView();
|
||||
}, [queries.length, queries[queries.length - 1]]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === 'idle') {
|
||||
setEventInterrupt(false);
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
conversationRef.current?.addEventListener('scroll', checkScroll);
|
||||
return () => {
|
||||
conversationRef.current?.removeEventListener('scroll', checkScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const prepResponseView = (query: Query, index: number) => {
|
||||
let responseView;
|
||||
if (query.response) {
|
||||
responseView = (
|
||||
<ConversationBubble
|
||||
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
|
||||
key={`${index}ANSWER`}
|
||||
message={query.response}
|
||||
type={'ANSWER'}
|
||||
sources={query.sources}
|
||||
toolCalls={query.tool_calls}
|
||||
feedback={query.feedback}
|
||||
handleFeedback={
|
||||
handleFeedback
|
||||
? (feedback) => handleFeedback(query, feedback, index)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
} else if (query.error) {
|
||||
const retryBtn = (
|
||||
<button
|
||||
className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
|
||||
disabled={status === 'loading'}
|
||||
onClick={() => {
|
||||
handleQuestion({
|
||||
question: queries[queries.length - 1].prompt,
|
||||
isRetry: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<RetryIcon
|
||||
width={12}
|
||||
height={12}
|
||||
fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
|
||||
stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
|
||||
strokeWidth={10}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
responseView = (
|
||||
<ConversationBubble
|
||||
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
|
||||
key={`${index}ERROR`}
|
||||
message={query.error}
|
||||
type="ERROR"
|
||||
retryBtn={retryBtn}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return responseView;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={conversationRef}
|
||||
onWheel={handleUserInterruption}
|
||||
onTouchMove={handleUserInterruption}
|
||||
className="flex justify-center w-full overflow-y-auto h-screen sm:pt-12"
|
||||
>
|
||||
{queries.length > 0 && !hasScrolledToLast && (
|
||||
<button
|
||||
onClick={scrollIntoView}
|
||||
aria-label="scroll to bottom"
|
||||
className="fixed bottom-40 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-gunmetal md:h-9 md:w-9 md:bg-opacity-100"
|
||||
>
|
||||
<img
|
||||
src={ArrowDown}
|
||||
alt="arrow down"
|
||||
className="h-4 w-4 opacity-50 md:h-5 md:w-5 filter dark:invert"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1300px] px-2">
|
||||
{queries.length > 0 ? (
|
||||
queries.map((query, index) => (
|
||||
<Fragment key={index}>
|
||||
<ConversationBubble
|
||||
className={'first:mt-5'}
|
||||
key={`${index}QUESTION`}
|
||||
message={query.prompt}
|
||||
type="QUESTION"
|
||||
handleUpdatedQuestionSubmission={handleQuestionSubmission}
|
||||
questionNumber={index}
|
||||
sources={query.sources}
|
||||
/>
|
||||
{prepResponseView(query, index)}
|
||||
</Fragment>
|
||||
))
|
||||
) : (
|
||||
<Hero handleQuestion={handleQuestion} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,9 @@
|
||||
import { Query } from './conversationModels';
|
||||
import { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import ConversationMessages from './ConversationMessages';
|
||||
import MessageInput from '../components/MessageInput';
|
||||
import conversationService from '../api/services/conversationService';
|
||||
import ConversationBubble from './ConversationBubble';
|
||||
import Send from '../assets/send.svg';
|
||||
import Spinner from '../assets/spinner.svg';
|
||||
import {
|
||||
selectClientAPIKey,
|
||||
setClientApiKey,
|
||||
@@ -27,6 +24,7 @@ import {
|
||||
} from './sharedConversationSlice';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { formatDate } from '../utils/dateTimeUtils';
|
||||
|
||||
export const SharedConversation = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -38,27 +36,14 @@ export const SharedConversation = () => {
|
||||
const apiKey = useSelector(selectClientAPIKey);
|
||||
const status = useSelector(selectStatus);
|
||||
|
||||
const inputRef = useRef<HTMLDivElement>(null);
|
||||
const sharedConversationRef = useRef<HTMLDivElement>(null);
|
||||
const [input, setInput] = useState('');
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
||||
const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
|
||||
const [eventInterrupt, setEventInterrupt] = useState(false);
|
||||
const endMessageRef = useRef<HTMLDivElement>(null);
|
||||
const handleUserInterruption = () => {
|
||||
if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
|
||||
};
|
||||
useEffect(() => {
|
||||
!eventInterrupt && scrollIntoView();
|
||||
}, [queries.length, queries[queries.length - 1]]);
|
||||
|
||||
useEffect(() => {
|
||||
identifier && dispatch(setIdentifier(identifier));
|
||||
const element = document.getElementById('inputbox') as HTMLInputElement;
|
||||
if (element) {
|
||||
element.focus();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -68,20 +53,6 @@ export const SharedConversation = () => {
|
||||
}
|
||||
}, [queries[queries.length - 1]]);
|
||||
|
||||
const scrollIntoView = () => {
|
||||
if (!sharedConversationRef?.current || eventInterrupt) return;
|
||||
|
||||
if (status === 'idle' || !queries[queries.length - 1].response) {
|
||||
sharedConversationRef.current.scrollTo({
|
||||
behavior: 'smooth',
|
||||
top: sharedConversationRef.current.scrollHeight,
|
||||
});
|
||||
} else {
|
||||
sharedConversationRef.current.scrollTop =
|
||||
sharedConversationRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
const fetchQueries = () => {
|
||||
identifier &&
|
||||
conversationService
|
||||
@@ -97,7 +68,7 @@ export const SharedConversation = () => {
|
||||
setFetchedData({
|
||||
queries: data.queries,
|
||||
title: data.title,
|
||||
date: data.date,
|
||||
date: formatDate(data.timestamp),
|
||||
identifier,
|
||||
}),
|
||||
);
|
||||
@@ -105,47 +76,16 @@ export const SharedConversation = () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
const handlePaste = (e: React.ClipboardEvent) => {
|
||||
e.preventDefault();
|
||||
const text = e.clipboardData.getData('text/plain');
|
||||
inputRef.current && (inputRef.current.innerText = text);
|
||||
};
|
||||
const prepResponseView = (query: Query, index: number) => {
|
||||
let responseView;
|
||||
if (query.response) {
|
||||
responseView = (
|
||||
<ConversationBubble
|
||||
ref={endMessageRef}
|
||||
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
|
||||
key={`${index}ANSWER`}
|
||||
message={query.response}
|
||||
type={'ANSWER'}
|
||||
sources={query.sources ?? []}
|
||||
toolCalls={query.tool_calls}
|
||||
></ConversationBubble>
|
||||
);
|
||||
} else if (query.error) {
|
||||
responseView = (
|
||||
<ConversationBubble
|
||||
ref={endMessageRef}
|
||||
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
|
||||
key={`${index}ERROR`}
|
||||
message={query.error}
|
||||
type="ERROR"
|
||||
></ConversationBubble>
|
||||
);
|
||||
}
|
||||
return responseView;
|
||||
};
|
||||
|
||||
const handleQuestionSubmission = () => {
|
||||
if (inputRef.current?.textContent && status !== 'loading') {
|
||||
if (input && status !== 'loading') {
|
||||
if (lastQueryReturnedErr) {
|
||||
// update last failed query with new prompt
|
||||
dispatch(
|
||||
updateQuery({
|
||||
index: queries.length - 1,
|
||||
query: {
|
||||
prompt: inputRef.current.textContent,
|
||||
prompt: input,
|
||||
},
|
||||
}),
|
||||
);
|
||||
@@ -154,9 +94,9 @@ export const SharedConversation = () => {
|
||||
isRetry: true,
|
||||
});
|
||||
} else {
|
||||
handleQuestion({ question: inputRef.current.textContent });
|
||||
handleQuestion({ question: input });
|
||||
}
|
||||
inputRef.current.textContent = '';
|
||||
setInput('');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -169,7 +109,6 @@ export const SharedConversation = () => {
|
||||
}) => {
|
||||
question = question.trim();
|
||||
if (question === '') return;
|
||||
setEventInterrupt(false);
|
||||
!isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
|
||||
dispatch(fetchSharedAnswer({ question }));
|
||||
};
|
||||
@@ -194,93 +133,47 @@ export const SharedConversation = () => {
|
||||
content="Shared conversations with DocsGPT"
|
||||
/>
|
||||
</Helmet>
|
||||
<div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
|
||||
<div
|
||||
ref={sharedConversationRef}
|
||||
onWheel={handleUserInterruption}
|
||||
onTouchMove={handleUserInterruption}
|
||||
className="flex w-full justify-center overflow-auto"
|
||||
>
|
||||
<div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
|
||||
<div className="mb-2 w-full border-b pb-2 dark:border-b-silver">
|
||||
<h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
|
||||
{title}
|
||||
</h1>
|
||||
<h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
|
||||
{t('sharedConv.subtitle')}{' '}
|
||||
<a href="/" className="text-[#007DFF]">
|
||||
DocsGPT
|
||||
</a>
|
||||
</h2>
|
||||
<h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
|
||||
{date}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="">
|
||||
{queries?.map((query, index) => {
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
<ConversationBubble
|
||||
ref={endMessageRef}
|
||||
className={'mb-1 last:mb-28 md:mb-7'}
|
||||
key={`${index}QUESTION`}
|
||||
message={query.prompt}
|
||||
type="QUESTION"
|
||||
sources={query.sources}
|
||||
></ConversationBubble>
|
||||
|
||||
{prepResponseView(query, index)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black ">
|
||||
<div className="border-b p-2 dark:border-b-silver w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1200px]">
|
||||
<h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
|
||||
{title}
|
||||
</h1>
|
||||
<h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
|
||||
{t('sharedConv.subtitle')}{' '}
|
||||
<a href="/" className="text-[#007DFF]">
|
||||
DocsGPT
|
||||
</a>
|
||||
</h2>
|
||||
<h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
|
||||
{date}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex w-11/12 flex-col items-center gap-4 pb-2 md:w-10/12 lg:w-6/12">
|
||||
<ConversationMessages
|
||||
handleQuestion={handleQuestion}
|
||||
handleQuestionSubmission={handleQuestionSubmission}
|
||||
queries={queries}
|
||||
status={status}
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-4 pb-2 w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1200px]">
|
||||
{apiKey ? (
|
||||
<div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
|
||||
<div
|
||||
id="inputbox"
|
||||
ref={inputRef}
|
||||
tabIndex={1}
|
||||
onPaste={handlePaste}
|
||||
placeholder={t('inputPlaceholder')}
|
||||
contentEditable
|
||||
className={`inputbox-style max-h-24 w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white pt-5 pb-[22px] text-base leading-tight opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleQuestionSubmission();
|
||||
}
|
||||
}}
|
||||
></div>
|
||||
{status === 'loading' ? (
|
||||
<img
|
||||
src={Spinner}
|
||||
className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent filter dark:invert"
|
||||
></img>
|
||||
) : (
|
||||
<div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
|
||||
<img
|
||||
onClick={handleQuestionSubmission}
|
||||
className="ml-[4px] h-6 w-6 text-white filter dark:invert"
|
||||
src={Send}
|
||||
></img>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<MessageInput
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onSubmit={() => handleQuestionSubmission()}
|
||||
loading={status === 'loading'}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe mb-14 sm:mb-0"
|
||||
className="w-fit rounded-full bg-purple-30 py-3 px-5 text-white shadow-xl transition-colors duration-200 hover:bg-violets-are-blue mb-14 sm:mb-0"
|
||||
>
|
||||
{t('sharedConv.button')}
|
||||
</button>
|
||||
)}
|
||||
<span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
|
||||
|
||||
<p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
|
||||
{t('sharedConv.meta')}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -265,8 +265,7 @@ export const conversationSlice = createSlice({
|
||||
return state;
|
||||
}
|
||||
state.status = 'failed';
|
||||
state.queries[state.queries.length - 1].error =
|
||||
'Something went wrong. Please check your internet connection.';
|
||||
state.queries[state.queries.length - 1].error = 'Something went wrong';
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -501,15 +501,15 @@ input:-webkit-autofill:active {
|
||||
.dark input:-webkit-autofill:hover,
|
||||
.dark input:-webkit-autofill:focus,
|
||||
.dark input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #E5E7EB !important;
|
||||
-webkit-text-fill-color: #e5e7eb !important;
|
||||
-webkit-box-shadow: 0 0 0 30px transparent inset !important;
|
||||
background-color: transparent !important;
|
||||
caret-color: #E5E7EB;
|
||||
caret-color: #e5e7eb;
|
||||
}
|
||||
|
||||
/* Additional autocomplete dropdown styles for dark mode */
|
||||
.dark input:-webkit-autofill::first-line {
|
||||
color: #E5E7EB;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.inputbox-style {
|
||||
|
||||
@@ -138,7 +138,7 @@ export const ShareConversationModal = ({
|
||||
</span>
|
||||
{status === 'fetched' ? (
|
||||
<button
|
||||
className="my-1 h-10 w-28 rounded-full border border-solid bg-purple-30 p-2 text-sm text-white hover:bg-violets-are-blue"
|
||||
className="my-1 h-10 w-28 rounded-full bg-purple-30 p-2 text-sm text-white hover:bg-violets-are-blue"
|
||||
onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
|
||||
>
|
||||
{isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
|
||||
|
||||
@@ -1,19 +1,39 @@
|
||||
export function formatDate(dateString: string): string {
|
||||
if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) {
|
||||
if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}[+-]\d{2}:\d{2}$/.test(dateString)) {
|
||||
// ISO 8601 format
|
||||
const dateTime = new Date(dateString);
|
||||
return dateTime.toLocaleTimeString([], {
|
||||
return dateTime.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
} else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) {
|
||||
const dateTime = new Date(dateString);
|
||||
return dateTime.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
} else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(dateString)) {
|
||||
const dateTime = new Date(dateString);
|
||||
return dateTime.toLocaleTimeString([], {
|
||||
return dateTime.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
} else if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
} else {
|
||||
return dateString;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user