LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-02 18:13:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #837 from ManishMadan2882/main

Browse Source 
Adding Dark Mode
This commit is contained in:
Alex
2024-01-23 14:59:22 +00:00
committed by GitHub
parent 6e236ba74d 3e3886ced7
commit cbc5f47786
30 changed files with 266 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/conversation/Conversation.tsx
View File

@@ -11,6 +11,7 @@ import {
updateQuery,
} from './conversationSlice';
import Send from './../assets/send.svg';
import SendDark from './../assets/send_dark.svg'
import Spinner from './../assets/spinner.svg';
import { FEEDBACK, Query } from './conversationModels';
import { sendFeedback } from './conversationApi';
@@ -22,7 +23,7 @@ export default function Conversation() {
const dispatch = useDispatch<AppDispatch>();
const endMessageRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLDivElement>(null);
const isDarkTheme = document.documentElement.classList.contains('dark');
const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
useEffect(() => {
@@ -121,7 +122,7 @@ export default function Conversation() {
<button
onClick={scrollIntoView}
aria-label="scroll to bottom"
className="fixed bottom-32 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 md:h-9 md:w-9 md:bg-opacity-100 "
className="fixed bottom-32 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 dark:bg-purple-taupe bg-opacity-50 md:h-9 md:w-9 md:bg-opacity-100 "
>
<img
src={ArrowDown}
@@ -152,7 +153,7 @@ export default function Conversation() {
{queries.length === 0 && (
<Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
)}
<div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white pt-3 md:fixed md:w-[65%]">
<div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white dark:bg-raisin-black pt-3 md:fixed md:w-[65%]">
<div className="flex h-full w-full">
<div
id="inputbox"
@@ -161,7 +162,7 @@ export default function Conversation() {
placeholder="Type your message here..."
contentEditable
onPaste={handlePaste}
className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white dark:bg-transparent dark:text-bright-gray py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
@@ -175,24 +176,24 @@ export default function Conversation() {
{status === 'loading' ? (
<img
src={Spinner}
className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end"
className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
></img>
) : (
<div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
<img
className="ml-[9px] mt-[9px]"
className="ml-[9px] mt-[9px] text-white"
onClick={() => {
if (inputRef.current?.textContent) {
handleQuestion(inputRef.current.textContent);
inputRef.current.textContent = '';
}
}}
src={Send}
src={isDarkTheme ? SendDark : Send}
></img>
</div>
)}
</div>
<p className="text-gray-595959 w-[100vw] self-center bg-white p-5 text-center text-xs md:w-full">
<p className="text-gray-595959 dark:text-bright-gray w-[100vw] self-center bg-transparent p-5 text-center text-xs md:w-full">
This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
questions.
</p>

49
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -64,7 +64,7 @@ const ConversationBubble = forwardRef<
bubble = (
<div
ref={ref}
className={`flex self-start ${className} group flex-col pr-20`}
className={`flex self-start ${className} group flex-col pr-20 dark:text-bright-gray`}
>
<div className="flex self-start">
<Avatar
@@ -79,7 +79,7 @@ const ConversationBubble = forwardRef<
/>
<div
className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 p-3.5 ${
className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${
type === 'ERROR'
? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
: 'flex-col rounded-3xl'
@@ -202,10 +202,8 @@ const ConversationBubble = forwardRef<
>
<div className="absolute left-2 top-4">
<div
className="flex items-center justify-center rounded-full p-2"
style={{
backgroundColor: isCopyHovered ? '#EEEEEE' : '#ffffff',
}}
className={`flex items-center justify-center rounded-full p-2
${isCopyHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
{copied ? (
<CheckMark
@@ -237,21 +235,12 @@ const ConversationBubble = forwardRef<
>
<div className="absolute left-6 top-4">
<div
className="flex items-center justify-center rounded-full p-2"
style={{
backgroundColor: isLikeHovered
? isLikeClicked
? 'rgba(125, 84, 209, 0.3)'
: '#EEEEEE'
: isLikeClicked
? 'rgba(125, 84, 209, 0.3)'
: '#ffffff',
}}
className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${isLikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
<Like
className={`cursor-pointer ${
isLikeClicked || feedback === 'LIKE'
? 'fill-white-3000 stroke-purple-30'
className={`cursor-pointer
${isLikeClicked || feedback === 'LIKE'
? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
: 'fill-none stroke-gray-4000'
}`}
onClick={() => {
@@ -276,21 +265,13 @@ const ConversationBubble = forwardRef<
>
<div className="absolute left-10 top-4">
<div
className="flex items-center justify-center rounded-full p-2"
style={{
backgroundColor: isDislikeHovered
? isDislikeClicked
? 'rgba(248, 113, 113, 0.3)'
: '#EEEEEE'
: isDislikeClicked
? 'rgba(248, 113, 113, 0.3)'
: '#ffffff',
}}
className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
<Dislike
className={`cursor-pointer ${
isDislikeClicked || feedback === 'DISLIKE'
? 'fill-white-3000 stroke-red-2000'
? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
: 'fill-none stroke-gray-4000'
}`}
onClick={() => {
@@ -307,13 +288,13 @@ const ConversationBubble = forwardRef<
</div>
{sources && openSource !== null && sources[openSource] && (
<div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 p-2">
<p className="m-1 w-3/4 truncate text-xs text-gray-500">
<div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
<p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
Source: {sources[openSource].title}
</p>
<div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2">
<p className="text-break text-black">
<div className="m-2 rounded-xl border-2 border-gray-200 dark:border-chinese-silver bg-white dark:bg-dark-charcoal p-2">
<p className="text-break text-black dark:text-bright-gray">
{sources[openSource].text}
</p>
</div>

33
frontend/src/conversation/ConversationTile.tsx
View File

@@ -3,6 +3,8 @@ import { useSelector } from 'react-redux';
import Edit from '../assets/edit.svg';
import Exit from '../assets/exit.svg';
import Message from '../assets/message.svg';
import MessageDark from '../assets/message-dark.svg';
import CheckMark2 from '../assets/checkMark2.svg';
import Trash from '../assets/trash.svg';
@@ -27,7 +29,7 @@ export default function ConversationTile({
}: ConversationTileProps) {
const conversationId = useSelector(selectConversationId);
const tileRef = useRef<HTMLInputElement>(null);
const isDarkTheme = document.documentElement.classList.contains('dark');
const [isEdit, setIsEdit] = useState(false);
const [conversationName, setConversationsName] = useState('');
// useOutsideAlerter(
@@ -67,16 +69,14 @@ export default function ConversationTile({
onClick={() => {
selectConversation(conversation.id);
}}
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
conversationId === conversation.id ? 'bg-gray-100' : ''
}`}
className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${conversationId === conversation.id ? 'bg-gray-100 dark:bg-purple-taupe' : ''
}`}
>
<div
className={`flex ${
conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
} gap-4`}
className={`flex ${conversationId === conversation.id ? 'w-[75%]' : 'w-[95%]'
} gap-4`}
>
<img src={Message} className="ml-4 w-5"></img>
<img src={isDarkTheme ? MessageDark : Message} className="ml-4 w-5 dark:text-white" />
{isEdit ? (
<input
autoFocus
@@ -86,34 +86,33 @@ export default function ConversationTile({
onChange={(e) => setConversationsName(e.target.value)}
/>
) : (
<p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black">
<p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
{conversationName}
</p>
)}
</div>
{conversationId === conversation.id && (
<div className="flex">
<div className="flex text-white dark:text-[#949494]">
<img
src={isEdit ? CheckMark2 : Edit}
alt="Edit"
className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50"
className="mr-2 h-4 w-4 cursor-pointer hover:opacity-50 text-white"
id={`img-${conversation.id}`}
onClick={(event) => {
event.stopPropagation();
isEdit
? handleSaveConversation({
id: conversationId,
name: conversationName,
})
id: conversationId,
name: conversationName,
})
: handleEditConversation();
}}
/>
<img
src={isEdit ? Exit : Trash}
alt="Exit"
className={`mr-4 ${
isEdit ? 'h-3 w-3' : 'h-4 w-4'
}mt-px cursor-pointer hover:opacity-50`}
className={`mr-4 ${isEdit ? 'h-3 w-3' : 'h-4 w-4'
}mt-px cursor-pointer hover:opacity-50`}
id={`img-${conversation.id}`}
onClick={(event) => {
event.stopPropagation();