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

(feat:input) sources pop-up

Browse Source
This commit is contained in:
ManishMadan2882
2025-03-24 17:15:57 +05:30
parent 42422ccdcd
commit 76b9bc0d56
2 changed files with 45 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/components/SourcesPopup.tsx
View File

@@ -1,9 +1,11 @@
import React, { useRef, useEffect } from 'react';
import React, { useRef, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { Doc } from '../models/misc';
import SourceIcon from '../assets/source.svg';
import CheckIcon from '../assets/checkmark.svg';
import RedirectIcon from '../assets/redirect.svg';
import Input from './Input';
import {
selectSourceDocs,
selectSelectedDocs,
@@ -29,6 +31,8 @@ export default function SourcesPopup({
const dispatch = useDispatch();
const { t } = useTranslation();
const popupRef = useRef<HTMLDivElement>(null);
const [searchTerm, setSearchTerm] = useState('');
const embeddingsName =
import.meta.env.VITE_EMBEDDINGS_NAME ||
'huggingface_sentence-transformers/all-mpnet-base-v2';
@@ -36,6 +40,10 @@ export default function SourcesPopup({
const options = useSelector(selectSourceDocs);
const selectedDocs = useSelector(selectSelectedDocs);
const filteredOptions = options?.filter(option =>
option.name.toLowerCase().includes(searchTerm.toLowerCase())
);
const getPopupPosition = () => {
if (!anchorRef.current) return {};
@@ -89,20 +97,32 @@ export default function SourcesPopup({
className="bg-lotion dark:bg-charleston-green-2 rounded-xl shadow-md w-full max-w-md flex flex-col z-50 absolute"
>
<div className="px-6 py-4">
<h2 className="text-lg font-bold text-[#141414] dark:text-bright-gray">
<h2 className="text-lg font-bold text-[#141414] dark:text-bright-gray mb-4 dark:text-[20px]">
{t('conversation.sources.text')}
</h2>
<Input
id="source-search"
name="source-search"
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder={t('settings.documents.searchPlaceholder')}
borderVariant="thin"
className="mb-4"
labelBgClassName="bg-lotion dark:bg-charleston-green-2"
/>
</div>
<div className="overflow-y-auto h-[488px] mx-4 border border-[#D9D9D9] dark:border-purple-taupe rounded-md">
<div className="overflow-y-auto h-[488px] mx-4 border border-[#D9D9D9] dark:border-dim-gray rounded-md">
{options ? (
<>
{options.map((option: any, index: number) => {
{filteredOptions?.map((option: any, index: number) => {
if (option.model === embeddingsName) {
return (
<div
key={index}
className="flex cursor-pointer items-center p-3 hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors border-b border-[#D9D9D9] border-opacity-80"
className="flex cursor-pointer items-center p-3 hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors border-b border-[#D9D9D9] dark:border-dim-gray border-opacity-80 dark:text-[14px]"
onClick={() => {
dispatch(setSelectedDocs(option));
handlePostDocumentSelect(option);
@@ -112,7 +132,8 @@ export default function SourcesPopup({
<img
src={SourceIcon}
alt="Source"
className="w-5 h-5 mr-3"
width={14} height={14}
className="mr-3"
/>
<span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap">
{option.name}
@@ -121,7 +142,7 @@ export default function SourcesPopup({
<img
src={CheckIcon}
alt="Selected"
className="h-5 w-5 mr-2"
className="h-3 w-3 mr-2"
/>
)}
</div>
@@ -130,10 +151,10 @@ export default function SourcesPopup({
return null;
})}
<div
className="flex cursor-pointer items-center p-3 hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors border-b border-[#D9D9D9] border-opacity-80"
className="flex cursor-pointer items-center p-3 hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors border-b border-[#D9D9D9] dark:border-dim-gray border-opacity-80 dark:text-[14px]"
onClick={handleEmptyDocumentSelect}
>
<img src={SourceIcon} alt="Source" className="w-5 h-5 mr-3" />
<img width={14} height={14} src={SourceIcon} alt="Source" className="mr-3" />
<span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow">
{t('none')}
</span>
@@ -143,16 +164,27 @@ export default function SourcesPopup({
</div>
</>
) : (
<div className="p-4 text-center text-gray-500 dark:text-gray-400">
<div className="p-4 text-center text-gray-500 dark:text-bright-gray dark:text-[14px]">
{t('noSourcesAvailable')}
</div>
)}
</div>
<div className="px-6 py-4 opacity-75 hover:opacity-100 transition-opacity duration-200">
<a
href="/settings/documents"
className="text-violets-are-blue text-base font-medium flex items-center gap-2"
onClick={onClose}
>
Go to Documents
<img src={RedirectIcon} alt="Redirect" className="w-3 h-3" />
</a>
</div>
<div className="px-6 py-3 flex justify-start">
<button
onClick={handleUploadClick}
className="py-2 px-4 rounded-full border border-[#7D54D1] text-[#7D54D1] hover:bg-[#7D54D1] hover:text-white transition-colors duration-200 text-[14px] font-medium w-auto"
className="py-2 px-4 rounded-full border text-violets-are-blue hover:bg-violets-are-blue border-violets-are-blue hover:text-white transition-colors duration-200 text-[14px] font-medium w-auto"
>
Upload new
</button>