Archives/DocsGPT
2
0
Fork 0
mirror of https://github.com/arc53/DocsGPT synced 2024-11-17 21:26:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: dompurify import error

Browse Source
This commit is contained in:
Siddhant Rai 2024-06-03 20:36:52 +05:30
parent 72a1892058
commit 48497c749a
3 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/react-widget/package-lock.json generated
View File

@ -18,7 +18,7 @@
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"dompurify": "^3.0.9", "dompurify": "^3.1.5",
"flow-bin": "^0.229.2", "flow-bin": "^0.229.2",
"i": "^0.3.7", "i": "^0.3.7",
"install": "^0.13.0", "install": "^0.13.0",
@ -5744,7 +5744,9 @@
"node_modules/graceful-fs": { "node_modules/graceful-fs": {
"version": "4.2.11", "version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"dev": true,
"peer": true
}, },
"node_modules/has-flag": { "node_modules/has-flag": {
"version": "3.0.0", "version": "3.0.0",

2
extensions/react-widget/package.json
View File

@ -47,7 +47,7 @@
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"dompurify": "^3.0.9", "dompurify": "^3.1.5",
"flow-bin": "^0.229.2", "flow-bin": "^0.229.2",
"i": "^0.3.7", "i": "^0.3.7",
"install": "^0.13.0", "install": "^0.13.0",

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

@ -1,12 +1,13 @@
"use client"; "use client";
import { Fragment, useEffect, useRef, useState } from 'react' import React from 'react'
import { PaperPlaneIcon, RocketIcon, ExclamationTriangleIcon, Cross2Icon } from '@radix-ui/react-icons'; import DOMPurify from 'dompurify';
import { MESSAGE_TYPE, Query, Status } from '../types/index';
import MessageIcon from '../assets/message.svg';
import { fetchAnswerStreaming } from '../requests/streamingApi';
import styled, { keyframes, createGlobalStyle } from 'styled-components';
import snarkdown from '@bpmn-io/snarkdown'; import snarkdown from '@bpmn-io/snarkdown';
import { sanitize } from 'dompurify'; import styled, { keyframes, createGlobalStyle } from 'styled-components';
import { PaperPlaneIcon, RocketIcon, ExclamationTriangleIcon, Cross2Icon } from '@radix-ui/react-icons';
import MessageIcon from '../assets/message.svg';
import { MESSAGE_TYPE, Query, Status } from '../types/index';
import { fetchAnswerStreaming } from '../requests/streamingApi';
const GlobalStyles = createGlobalStyle` const GlobalStyles = createGlobalStyle`
.response pre { .response pre {
padding: 8px; padding: 8px;
@ -292,13 +293,13 @@ export const DocsGPTWidget = ({
heroDescription = 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.' heroDescription = 'This chatbot is built with DocsGPT and utilises GenAI, please review important information using sources.'
}) => { }) => {
const [prompt, setPrompt] = useState(''); const [prompt, setPrompt] = React.useState('');
const [status, setStatus] = useState<Status>('idle'); const [status, setStatus] = React.useState<Status>('idle');
const [queries, setQueries] = useState<Query[]>([]) const [queries, setQueries] = React.useState<Query[]>([])
const [conversationId, setConversationId] = useState<string | null>(null) const [conversationId, setConversationId] = React.useState<string | null>(null)
const [open, setOpen] = useState<boolean>(false) const [open, setOpen] = React.useState<boolean>(false)
const [eventInterrupt, setEventInterrupt] = useState<boolean>(false); //click or scroll by user while autoScrolling const [eventInterrupt, setEventInterrupt] = React.useState<boolean>(false); //click or scroll by user while autoScrolling
const endMessageRef = useRef<HTMLDivElement | null>(null); const endMessageRef = React.useRef<HTMLDivElement | null>(null);
const handleUserInterrupt = () => { const handleUserInterrupt = () => {
(status === 'loading') && setEventInterrupt(true); (status === 'loading') && setEventInterrupt(true);
} }
@ -316,7 +317,7 @@ export const DocsGPTWidget = ({
lastChild && scrollToBottom(lastChild) lastChild && scrollToBottom(lastChild)
}; };
useEffect(() => { React.useEffect(() => {
!eventInterrupt && scrollToBottom(endMessageRef.current); !eventInterrupt && scrollToBottom(endMessageRef.current);
}, [queries.length, queries[queries.length - 1]?.response]); }, [queries.length, queries[queries.length - 1]?.response]);
@ -396,7 +397,7 @@ export const DocsGPTWidget = ({
{ {
queries.length > 0 ? queries?.map((query, index) => { queries.length > 0 ? queries?.map((query, index) => {
return ( return (
<Fragment key={index}> <React.Fragment key={index}>
{ {
query.prompt && <MessageBubble type='QUESTION'> query.prompt && <MessageBubble type='QUESTION'>
<Message <Message
@ -412,7 +413,7 @@ export const DocsGPTWidget = ({
type='ANSWER' type='ANSWER'
ref={(index === queries.length - 1) ? endMessageRef : null} ref={(index === queries.length - 1) ? endMessageRef : null}
> >
<div className="response" dangerouslySetInnerHTML={{ __html: sanitize(snarkdown(query.response)) }} /> <div className="response" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(snarkdown(query.response)) }} />
</Message> </Message>
</MessageBubble> </MessageBubble>
: <div> : <div>
@ -436,7 +437,7 @@ export const DocsGPTWidget = ({
} }
</div> </div>
} }
</Fragment>) </React.Fragment>)
}) })
: <Hero title={heroTitle} description={heroDescription} /> : <Hero title={heroTitle} description={heroDescription} />
} }