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

Merge pull request #477 from staticGuru/input-hidden-issue-#474

Browse Source 
[FIX] Question is hidden under the question input box
This commit is contained in:
Alex
2023-10-08 23:27:45 +01:00
committed by GitHub
parent 151fdb9bad e108833db2
commit 6d0cc49ecd
2 changed files with 32 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/Hero.tsx
View File

@@ -5,26 +5,28 @@ export default function Hero({ className = '' }: { className?: string }) {
<p className="mr-2 text-4xl font-semibold">DocsGPT</p>
<p className="text-[27px]">🦖</p>
</div>
<p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000">
<p className="mb-3 text-center leading-6 text-black-1000">
Welcome to DocsGPT, your technical documentation assistant!
</p>
<p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
<p className="mb-3 text-center leading-6 text-black-1000">
Enter a query related to the information in the documentation you
selected to receive and we will provide you with the most relevant
answers.
selected to receive
<br /> and we will provide you with the most relevant answers.
</p>
<p className="mb-2 text-center text-sm font-normal leading-6 text-black-1000 ">
<p className="mb-3 text-center leading-6 text-black-1000">
Start by entering your query in the input field below and we will do the
rest!
</p>
<div className="sections mt-7 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0 ">
<div className=" rounded-[28px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tr-none md:rounded-br-none">
<div className="h-full rounded-[25px] bg-white p-6 md:rounded-tr-none md:rounded-br-none">
<img src="/message-text.svg" alt="lock" className="h-7 w-7" />
<h2 className="mt-2 mb-5 text-base font-normal leading-6">
Chat with Your Data
</h2>
<p className="w-[300px] text-sm font-normal leading-6 text-black-1000">
<div className="sections mt-1 flex flex-wrap items-center justify-center gap-1 sm:gap-1 md:gap-0 ">
<div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tr-none md:rounded-br-none">
<div className="h-full rounded-[45px] bg-white p-6 md:rounded-tr-none md:rounded-br-none">
<img
src="/message-text.svg"
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">Chat with Your Data</h2>
<p className="w-[250px] text-xs text-gray-500">
DocsGPT will use your data to answer questions. Whether its
documentation, source code, or Microsoft files, DocsGPT allows you
to have interactive conversations and find answers based on the
@@ -33,13 +35,11 @@ export default function Hero({ className = '' }: { className?: string }) {
</div>
</div>
<div className=" rounded-[28px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none md:py-1 md:px-0">
<div className="rounded-[25px] bg-white px-6 py-6 md:rounded-none">
<img src="/lock.svg" alt="lock" className="h-7 w-7" />
<h2 className="mt-2 mb-5 text-base font-normal leading-6">
Secure Data Storage
</h2>
<p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
<div className=" rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none md:py-1 md:px-0">
<div className="rounded-[45px] bg-white px-6 py-4 md:rounded-none">
<img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
<h2 className="mt-2 mb-3 text-lg font-bold">Secure Data Storage</h2>
<p className=" w-[250px] text-xs text-gray-500">
The security of your data is our top priority. DocsGPT ensures the
utmost protection for your sensitive information. With secure data
storage and privacy measures in place, you can trust that your
@@ -47,17 +47,15 @@ export default function Hero({ className = '' }: { className?: string }) {
</p>
</div>
</div>
<div className=" rounded-[28px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none">
<div className="rounded-[25px] bg-white p-6 px-6 lg:rounded-tl-none lg:rounded-bl-none">
<div className=" rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none">
<div className="rounded-[45px] bg-white p-6 px-6 lg:rounded-tl-none lg:rounded-bl-none">
<img
src="/message-programming.svg"
alt="lock"
className="h-7 w-7"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-5 text-base font-normal leading-6">
Open Source Code
</h2>
<p className=" w-[300px] text-sm font-normal leading-6 text-black-1000">
<h2 className="mt-2 mb-3 text-lg font-bold">Open Source Code</h2>
<p className=" w-[250px] text-xs text-gray-500">
DocsGPT is built on open source principles, promoting transparency
and collaboration. The source code is freely available, enabling
developers to contribute, enhance, and customize the app to meet

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

@@ -81,7 +81,7 @@ export default function Conversation() {
responseView = (
<ConversationBubble
ref={endMessageRef}
className={`${index === queries.length - 1 ? 'mb-24' : 'mb-7'}`}
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
key={`${index}ERROR`}
message={query.error}
type="ERROR"
@@ -91,7 +91,7 @@ export default function Conversation() {
responseView = (
<ConversationBubble
ref={endMessageRef}
className={`${index === queries.length - 1 ? 'mb-24' : 'mb-7'}`}
className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
key={`${index}ANSWER`}
message={query.response}
type={'ANSWER'}
@@ -134,7 +134,7 @@ export default function Conversation() {
return (
<Fragment key={index}>
<ConversationBubble
className={'mb-7'}
className={'last:mb-27 mb-7'}
key={`${index}QUESTION`}
message={query.prompt}
type="QUESTION"
@@ -149,14 +149,14 @@ 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 md:fixed md:w-[50%]">
<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="flex h-full w-full">
<div
ref={inputRef}
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 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 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();
@@ -170,10 +170,10 @@ 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-[20px] -mr-[30px] animate-spin cursor-pointer self-end"
></img>
) : (
<div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
<div className="relative right-[43px] bottom-[20px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
<img
className="ml-[9px] mt-[9px]"
onClick={() => {