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

chore: returned themes cofig into DocsGPTWidget component

Browse Source
This commit is contained in:
utin-francis-peter
2024-11-10 03:08:35 +01:00
parent 42e2c784c4
commit 97916bf925
2 changed files with 28 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,33 @@ import Like from "../assets/like.svg"
import Dislike from "../assets/dislike.svg" import Dislike from "../assets/dislike.svg"
import MarkdownIt from 'markdown-it'; import MarkdownIt from 'markdown-it';
const themes = {
dark: {
bg: '#222327',
text: '#fff',
primary: {
text: "#FAFAFA",
bg: '#222327'
},
secondary: {
text: "#A1A1AA",
bg: "#38383b"
}
},
light: {
bg: '#fff',
text: '#000',
primary: {
text: "#222327",
bg: "#fff"
},
secondary: {
text: "#A1A1AA",
bg: "#F6F6F6"
}
}
}
const sizesConfig = { const sizesConfig = {
small: { size: 'small', width: '320px', height: '400px' }, small: { size: 'small', width: '320px', height: '400px' },
@@ -631,7 +657,7 @@ export const DocsGPTWidget = ({
onClick={() => handleFeedback("DISLIKE", index)} /> onClick={() => handleFeedback("DISLIKE", index)} />
</Feedback>} </Feedback>}
</MessageBubble> </MessageBubble>
: <div> : (<div>
{ {
query.error ? <ErrorAlert> query.error ? <ErrorAlert>

36
extensions/react-widget/src/main.tsx
View File

@@ -1,46 +1,12 @@
import React from 'react'; import React from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { DocsGPTWidget } from './components/DocsGPTWidget'; import { DocsGPTWidget } from './components/DocsGPTWidget';
import { ThemeProvider } from 'styled-components';
import { THEME } from './types';
const themes = {
dark: {
bg: '#222327',
text: '#fff',
primary: {
text: "#FAFAFA",
bg: '#222327'
},
secondary: {
text: "#A1A1AA",
bg: "#38383b"
}
},
light: {
bg: '#fff',
text: '#000',
primary: {
text: "#222327",
bg: "#fff"
},
secondary: {
text: "#A1A1AA",
bg: "#F6F6F6"
}
}
}
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const renderWidget = (elementId: string, props={ const renderWidget = (elementId: string, props={}) => {
theme: "dark" as THEME
}) => {
const root = createRoot(document.getElementById(elementId) as HTMLElement); const root = createRoot(document.getElementById(elementId) as HTMLElement);
root.render( root.render(
<ThemeProvider theme={themes[props.theme]}>
<DocsGPTWidget {...props} /> <DocsGPTWidget {...props} />
</ThemeProvider>
); );
}; };
(window as any).renderDocsGPTWidget = renderWidget; (window as any).renderDocsGPTWidget = renderWidget;