LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fix:conv) perfect aligment

Browse Source
This commit is contained in:
ManishMadan2882
2025-03-16 03:57:31 +05:30
parent fd0bd13b08
commit 574a0e2dba
5 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/Hero.tsx
View File

@@ -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,41 +17,42 @@ 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 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-4 flex flex-col items-center justify-center dark:text-white"></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">
{/* 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 && (
<Fragment key={key}>
<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>
);
}

2
frontend/src/components/MessageInput.tsx
View File

@@ -52,7 +52,7 @@ export default function MessageInput({
};
return (
<div className="flex w-full items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-charleston-green-3">
<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>

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

@@ -228,7 +228,7 @@ export default function Conversation() {
status={status}
/>
<div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-full md:w-6/12 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]"

10
frontend/src/conversation/ConversationMessages.tsx
View File

@@ -139,7 +139,7 @@ export default function ConversationMessages({
ref={conversationRef}
onWheel={handleUserInterruption}
onTouchMove={handleUserInterruption}
className="flex justify-center w-full overflow-y-auto h-screen sm:pt-12 "
className="flex justify-center w-full overflow-y-auto h-screen sm:pt-12"
>
{queries.length > 0 && !hasScrolledToLast && (
<button
@@ -155,9 +155,9 @@ export default function ConversationMessages({
</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 ? (
<div className="w-full px-2 md:w-6/12">
{queries.map((query, index) => (
queries.map((query, index) => (
<Fragment key={index}>
<ConversationBubble
className={'first:mt-5'}
@@ -170,11 +170,11 @@ export default function ConversationMessages({
/>
{prepResponseView(query, index)}
</Fragment>
))}
</div>
))
) : (
<Hero handleQuestion={handleQuestion} />
)}
</div>
</div>
);
}

6
frontend/src/conversation/SharedConversation.tsx
View File

@@ -158,8 +158,8 @@ 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 className="border-b p-2 dark:border-b-silver w-full md:w-6/12">
<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>
@@ -179,7 +179,7 @@ export const SharedConversation = () => {
queries={queries}
status={status}
/>
<div className="flex flex-col items-center gap-4 pb-2 w-full md:w-6/12">
<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 ? (
<MessageInput
value={input}