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

Merge branch 'main' of https://github.com/arc53/DocsGPT

Browse Source
This commit is contained in:
GH Action - Upstream Sync
2024-11-06 01:01:16 +00:00
parent 171916e1a4 62b15f2d6f
commit ed6cd9890a
8 changed files with 105 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
application/api/user/routes.py
View File

@@ -433,6 +433,8 @@ class CombinedJson(Resource):
@api.doc(description="Provide JSON file with combined available indexes")
def get(self):
user = "local"
sort_field = request.args.get('sort', 'date') # Default to 'date'
sort_order = request.args.get('order', "desc") # Default to 'desc'
data = [
{
"name": "default",
@@ -445,7 +447,7 @@ class CombinedJson(Resource):
]
try:
for index in sources_collection.find({"user": user}).sort("date", -1):
for index in sources_collection.find({"user": user}).sort(sort_field, 1 if sort_order=="asc" else -1):
data.append(
{
"id": str(index["_id"]),

81
extensions/react-widget/src/components/DocsGPTWidget.tsx
View File

@@ -9,6 +9,7 @@ import { ThemeProvider } from 'styled-components';
import Like from "../assets/like.svg"
import Dislike from "../assets/dislike.svg"
import MarkdownIt from 'markdown-it';
const themes = {
dark: {
bg: '#222327',
@@ -35,6 +36,20 @@ const themes = {
}
}
}
const sizesConfig = {
small: { size:'small', width: '400px', height: '320px' },
medium: { size:'medium', width: '28vw', height: '70vh'},
large: { size:'large', width: '60vw', height: '75vh'},
getCustom: (custom: { width: string; height: string; maxWidth?: string; maxHeight?: string }) => ({
size:'custom',
width: custom.width,
height: custom.height,
maxWidth: custom.maxWidth || '968px',
maxHeight: custom.maxHeight || '70vh',
}),
};
const GlobalStyles = createGlobalStyle`
.response pre {
padding: 8px;
@@ -80,7 +95,7 @@ const Overlay = styled.div`
z-index: 999;
transition: opacity 0.5s;
`
const WidgetContainer = styled.div<{ modal: boolean }>`
const WidgetContainer = styled.div<{ modal?: boolean }>`
display: block;
position: fixed;
right: ${props => props.modal ? '50%' : '10px'};
@@ -183,23 +198,29 @@ const Description = styled.p`
margin-top: 0;
`;
const Conversation = styled.div<{ size: string }>`
min-height: 250px;
max-width: 968px;
height: ${props => props.size === 'large' ? '75vh' : props.size === 'medium' ? '70vh' : '320px'};
width: ${props => props.size === 'large' ? '60vw' : props.size === 'medium' ? '28vw' : '400px'};
padding-inline: 0.5rem;
border-radius: 0.375rem;
text-align: left;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #4a4a4a transparent; /* thumb color track color */
@media only screen and (max-width: 768px) {
const Conversation = styled.div`
min-height: 250px;
max-height: ${(props) => props.theme.dimensions.maxHeight};
max-width: ${(props) => props.theme.dimensions.maxWidth};
height: ${(props) => props.theme.dimensions.height};
width: ${(props) => props.theme.dimensions.width};
padding-inline: 0.5rem;
border-radius: 0.375rem;
text-align: left;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #4a4a4a transparent; /* thumb color track color */
@media only screen and (max-width: 768px) {
width: 90vw !important;
}
@media only screen and (min-width:768px ) and (max-width: 1280px) {
width:${props => props.size === 'large' ? '90vw' : props.size === 'medium' ? '60vw' : '400px'} !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1280px) {
width: ${(props) =>
props.theme.dimensions.size === "large"
? "90vw"
: props.theme.dimensions.size === "medium"
? "60vw"
: "400px"} !important;
}
`;
const Feedback = styled.div`
background-color: transparent;
@@ -265,9 +286,9 @@ const DotAnimation = styled.div`
const Delay = styled(DotAnimation) <{ delay: number }>`
animation-delay: ${props => props.delay + 'ms'};
`;
const PromptContainer = styled.form<{ size: string }>`
const PromptContainer = styled.form`
background-color: transparent;
height: ${props => props.size == 'large' ? '60px' : '40px'};
height: ${props => props.theme.dimensions.size == 'large' ? '60px' : '40px'};
margin: 16px;
display: flex;
justify-content: space-evenly;
@@ -282,14 +303,14 @@ const StyledInput = styled.input`
color: ${props => props.theme.text};
outline: none;
`;
const StyledButton = styled.button<{ size: string }>`
const StyledButton = styled.button`
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
border-radius: 6px;
min-width: ${props => props.size === 'large' ? '60px' : '36px'};
height: ${props => props.size === 'large' ? '60px' : '36px'};
min-width: ${props => props.theme.dimensions.size === 'large' ? '60px' : '36px'};
height: ${props => props.theme.dimensions.size === 'large' ? '60px' : '36px'};
margin-left:8px;
padding: 0px;
border: none;
@@ -366,13 +387,14 @@ export const DocsGPTWidget = ({
theme = 'dark',
buttonIcon = 'https://d3dg1063dc54p9.cloudfront.net/widget/message.svg',
buttonBg = 'linear-gradient(to bottom right, #5AF0EC, #E80D9D)',
collectFeedback = true
collectFeedback = true,
deafultOpen = false
}: WidgetProps) => {
const [prompt, setPrompt] = React.useState('');
const [status, setStatus] = React.useState<Status>('idle');
const [queries, setQueries] = React.useState<Query[]>([])
const [conversationId, setConversationId] = React.useState<string | null>(null)
const [open, setOpen] = React.useState<boolean>(false)
const [open, setOpen] = React.useState<boolean>(deafultOpen)
const [eventInterrupt, setEventInterrupt] = React.useState<boolean>(false); //click or scroll by user while autoScrolling
const isBubbleHovered = useRef<boolean>(false)
const endMessageRef = React.useRef<HTMLDivElement | null>(null);
@@ -486,8 +508,13 @@ export const DocsGPTWidget = ({
const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
event.currentTarget.src = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png";
};
const dimensions =
typeof size === 'object' && 'custom' in size
? sizesConfig.getCustom(size.custom)
: sizesConfig[size];
return (
<ThemeProvider theme={themes[theme]}>
<ThemeProvider theme={{...themes[theme], dimensions}}>
{open && size === 'large' &&
<Overlay onClick={() => {
setOpen(false)
@@ -513,7 +540,7 @@ export const DocsGPTWidget = ({
</ContentWrapper>
</Header>
</div>
<Conversation size={size} onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
<Conversation onWheel={handleUserInterrupt} onTouchMove={handleUserInterrupt}>
{
queries.length > 0 ? queries?.map((query, index) => {
return (
@@ -584,13 +611,11 @@ export const DocsGPTWidget = ({
}
</Conversation>
<PromptContainer
size={size}
onSubmit={handleSubmit}>
<StyledInput
value={prompt} onChange={(event) => setPrompt(event.target.value)}
type='text' placeholder="What do you want to do?" />
<StyledButton
size={size}
disabled={prompt.trim().length == 0 || status !== 'idle'}>
<PaperPlaneIcon width={15} height={15} color='white' />
</StyledButton>

12
extensions/react-widget/src/types/index.ts
View File

@@ -19,9 +19,17 @@ export interface WidgetProps {
description?: string;
heroTitle?: string;
heroDescription?: string;
size?: 'small' | 'medium' | 'large';
size?: 'small' | 'medium' | 'large' | {
custom: {
width: string;
height: string;
maxWidth?: string;
maxHeight?: string;
};
};
theme?:THEME,
buttonIcon?:string;
buttonBg?:string;
collectFeedback?:boolean
collectFeedback?:boolean;
deafultOpen?: boolean;
}

2
frontend/src/Navigation.tsx
View File

@@ -254,7 +254,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
ref={navRef}
className={`${
!navOpen && '-ml-96 md:-ml-[18rem]'
} duration-20 fixed top-0 z-40 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
>
<div
className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}

3
frontend/src/api/services/userService.ts
View File

@@ -2,7 +2,8 @@ import apiClient from '../client';
import endpoints from '../endpoints';
const userService = {
getDocs: (): Promise<any> => apiClient.get(endpoints.USER.DOCS),
getDocs: (sort = 'date', order = 'desc'): Promise<any> =>
apiClient.get(`${endpoints.USER.DOCS}?sort=${sort}&order=${order}`),
checkDocs: (data: any): Promise<any> =>
apiClient.post(endpoints.USER.DOCS_CHECK, data),
getAPIKeys: (): Promise<any> => apiClient.get(endpoints.USER.API_KEYS),

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

@@ -474,7 +474,7 @@ function AllSources(sources: AllSourcesProps) {
></img>
) : null}
</span>
<p className="mt-3 max-h-24 overflow-y-auto break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
<p className="mt-3 max-h-16 overflow-y-auto break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
{source.text}
</p>
</div>

7
frontend/src/preferences/preferenceApi.ts
View File

@@ -3,9 +3,12 @@ import userService from '../api/services/userService';
import { Doc } from '../models/misc';
//Fetches all JSON objects from the source. We only use the objects with the "model" property in SelectDocsModal.tsx. Hopefully can clean up the source file later.
export async function getDocs(): Promise<Doc[] | null> {
export async function getDocs(
sort = 'date',
order = 'desc',
): Promise<Doc[] | null> {
try {
const response = await userService.getDocs();
const response = await userService.getDocs(sort, order);
const data = await response.json();
const docs: Doc[] = [];

35
frontend/src/settings/Documents.tsx
View File

@@ -45,14 +45,30 @@ const Documents: React.FC<DocumentsProps> = ({
const [modalState, setModalState] = useState<ActiveState>('INACTIVE'); // Initialize with inactive state
const [isOnboarding, setIsOnboarding] = useState(false); // State for onboarding flag
const [loading, setLoading] = useState(false);
const [sortField, setSortField] = useState<'date' | 'tokens'>('date');
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
const syncOptions = [
{ label: 'Never', value: 'never' },
{ label: 'Daily', value: 'daily' },
{ label: 'Weekly', value: 'weekly' },
{ label: 'Monthly', value: 'monthly' },
];
const refreshDocs = (field: 'date' | 'tokens') => {
if (field === sortField) {
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
} else {
setSortOrder('desc');
setSortField(field);
}
getDocs(sortField, sortOrder)
.then((data) => {
dispatch(setSourceDocs(data));
})
.catch((error) => console.error(error))
.finally(() => {
setLoading(false);
});
};
const handleManageSync = (doc: Doc, sync_frequency: string) => {
setLoading(true);
userService
@@ -110,19 +126,28 @@ const Documents: React.FC<DocumentsProps> = ({
<th>
<div className="flex justify-center items-center">
{t('settings.documents.date')}
<img src={caretSort} alt="" />
<img
className="cursor-pointer"
onClick={() => refreshDocs('date')}
src={caretSort}
alt="sort"
/>
</div>
</th>
<th>
<div className="flex justify-center items-center">
{t('settings.documents.tokenUsage')}
<img src={caretSort} alt="" />
<img
className="cursor-pointer"
onClick={() => refreshDocs('tokens')}
src={caretSort}
alt="sort"
/>
</div>
</th>
<th>
<div className="flex justify-center items-center">
{t('settings.documents.type')}
<img src={caretSort} alt="" />
</div>
</th>
<th></th>