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

(feat:ui) updating hero, code snippets

Browse Source
This commit is contained in:
ManishMadan2882
2025-02-27 03:04:55 +05:30
parent 56b8074c22
commit 0b437d0e8d
4 changed files with 61 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/Hero.tsx
View File

@@ -37,12 +37,14 @@ export default function Hero({
<Fragment key={key}>
<button
onClick={() => handleQuestion({ question: demo.query })}
className="w-full rounded-full border border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw] bg-white dark:bg-raisin-black focus:outline-none"
className={`w-full rounded-full border bg-transparent px-6 py-4 text-left xl:min-w-[24vw] focus:outline-none
border-dark-gray text-just-black hover:bg-cultured
dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green`}
>
<p className="mb-1 font-semibold text-black-1000 dark:text-bright-gray">
{demo.header}
</p>
<span className="text-gray-700 dark:text-gray-300">
<span className="text-gray-700 dark:text-gray-300 opacity-60">
{demo.query}
</span>
</button>

8
frontend/src/conversation/Conversation.tsx
View File

@@ -382,10 +382,10 @@ export default function Conversation() {
)}
</div>
<div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 sm:w-[62%] h-auto py-1">
<div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 sm:w-[58%] xl:max-w-[52vw] h-auto py-1">
<div
{...getRootProps()}
className="flex w-full items-center rounded-[40px] border border-silver bg-white dark:bg-raisin-black"
className="flex w-full items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-raisin-black"
>
<label htmlFor="file-upload" className="sr-only">
{t('modals.uploadDoc.label')}
@@ -423,7 +423,7 @@ export default function Conversation() {
className="flex items-center justify-center"
>
<img
className="ml-[4px] h-6 w-6 text-white"
className="ml-[4px] h-6 w-6 text-white filter dark:invert-[0.45] invert-[0.35]"
src={isDarkTheme ? SendDark : Send}
alt={t('send')}
/>
@@ -432,7 +432,7 @@ export default function Conversation() {
)}
</div>
<p className="text-gray-595959 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-bright-gray md:inline md:w-full">
<p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
{t('tagline')}
</p>
</div>

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

@@ -5,10 +5,14 @@ import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import { useSelector } from 'react-redux';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import {
vscDarkPlus,
oneLight,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';
import rehypeKatex from 'rehype-katex';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import { useDarkTheme } from '../hooks';
import DocsGPT3 from '../assets/cute_docsgpt3.svg';
import ChevronDown from '../assets/chevron-down.svg';
@@ -69,6 +73,7 @@ const ConversationBubble = forwardRef<
ref,
) {
const { t } = useTranslation();
const [isDarkTheme] = useDarkTheme();
// const bubbleRef = useRef<HTMLDivElement | null>(null);
const chunks = useSelector(selectChunks);
const selectedDocs = useSelector(selectSelectedDocs);
@@ -333,7 +338,7 @@ const ConversationBubble = forwardRef<
</p>
</div>
<div
className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[18px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
type === 'ERROR'
? 'relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
: 'flex-col rounded-3xl'
@@ -347,25 +352,31 @@ const ConversationBubble = forwardRef<
code(props) {
const { children, className, node, ref, ...rest } = props;
const match = /language-(\w+)/.exec(className || '');
const language = match ? match[1] : '';
return match ? (
<div className="group relative">
<SyntaxHighlighter
{...rest}
PreTag="div"
language={match[1]}
style={vscDarkPlus}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
<div
className={`absolute right-3 top-3 lg:invisible
${type !== 'ERROR' ? 'group-hover:lg:visible' : ''} `}
>
<div className="group relative rounded-lg overflow-hidden border border-light-silver dark:border-raisin-black">
<div className="flex justify-between items-center px-3 py-2 bg-platinum dark:bg-eerie-black-2">
<span className="text-xs font-medium text-just-black dark:text-chinese-white">
{language}
</span>
<CopyButton
text={String(children).replace(/\n$/, '')}
/>
</div>
<SyntaxHighlighter
{...rest}
PreTag="div"
language={language}
style={isDarkTheme ? vscDarkPlus : oneLight}
className="!mt-0"
customStyle={{
margin: 0,
borderRadius: 0,
}}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
</div>
) : (
<code className="whitespace-pre-line rounded-[6px] bg-gray-200 px-[8px] py-[4px] text-xs font-normal dark:bg-independence dark:text-bright-gray">