Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Makes input field absolute in Conversation, fixes delete icon in Settings/Documents #848

Merged
merged 3 commits into from
Feb 9, 2024
Merged

Makes input field absolute in Conversation, fixes delete icon in Settings/Documents #848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c0ed544
fix(settings): delete button
ManishMadan2882 Feb 9, 2024
9129f7f
fix(Conversation): input box UI
ManishMadan2882 Feb 9, 2024
8826f0f
slight UI improvements in input box
ManishMadan2882 Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions frontend/src/Setting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import {
selectPrompt,
setPrompt,
selectSourceDocs,
setSourceDocs,
} from './preferences/preferenceSlice';
import { Doc } from './preferences/preferenceApi';
import { useDarkTheme } from './hooks';
import { Light } from 'react-syntax-highlighter';
type PromptProps = {
prompts: { name: string; id: string; type: string }[];
selectedPrompt: { name: string; id: string; type: string };
Expand Down Expand Up @@ -86,13 +86,11 @@ const Setting: React.FC = () => {
fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
method: 'GET',
})
.then(() => {
// remove the image element from the DOM
const imageElement = document.querySelector(
`#img-${index}`,
) as HTMLElement;
const parentElement = imageElement.parentNode as HTMLElement;
parentElement.parentNode?.removeChild(parentElement);
.then((response) => {
if(response.ok && documents){
const updatedDocuments = [...documents.slice(0, index), ...documents.slice(index + 1)];
dispatch(setSourceDocs(updatedDocuments));
}
})
.catch((error) => console.error(error));
};
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/conversation/Conversation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,12 @@ export default function Conversation() {
)}

{queries.length > 0 && (
<div className="mt-20 flex flex-col transition-all md:w-3/4">
<div className="mt-20 mb-9 flex flex-col transition-all md:w-3/4">
{queries.map((query, index) => {
return (
<Fragment key={index}>
<ConversationBubble
className={'last:mb-27 mb-7'}
className={'last:mb-28 mb-7'}
key={`${index}QUESTION`}
message={query.prompt}
type="QUESTION"
Expand All @@ -160,7 +160,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 dark:bg-raisin-black pt-3 md:fixed md:w-[65%]">
<div className="absolute bottom-0 flex w-11/12 md:w-[65%] flex-col items-end self-center bg-white dark:bg-raisin-black pt-4 md:fixed">
<div className="flex h-full w-full">
<div
id="inputbox"
Expand All @@ -169,7 +169,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 dark:bg-transparent dark:text-bright-gray 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-raisin-black 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();
Expand Down Expand Up @@ -200,7 +200,7 @@ export default function Conversation() {
</div>
)}
</div>
<p className="text-gray-595959 dark:text-bright-gray w-[100vw] self-center bg-transparent p-5 text-center text-xs md:w-full">
<p className="text-gray-595959 dark:text-bright-gray bg-white dark:bg-raisin-black 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>
Expand Down
Loading