From 802e13e1d2b195d6b248983e4b1361c614cb2ece Mon Sep 17 00:00:00 2001 From: wangyantong2000 <18745996292@163.com> Date: Wed, 25 Sep 2024 22:15:03 +0800 Subject: [PATCH 1/4] import prochat --- package.json | 2 - src/helpers/LLM-info.ts | 15 + src/helpers/eventEmitter.ts | 3 + src/helpers/get-repo-info.ts | 3 + src/manifest.json | 2 +- .../features/oss-gpt/ChatItemRender.tsx | 43 + .../features/oss-gpt/LoadingEnd.tsx | 36 + .../features/oss-gpt/LoadingStart.tsx | 20 + .../features/oss-gpt/OssGpt.tsx | 340 +++ .../features/oss-gpt/StarterList.tsx | 36 + .../features/oss-gpt/UserContent.tsx | 25 + .../oss-gpt/components/ErrorBoundary.tsx | 31 + .../Highlight/components/CopyButton/index.tsx | 56 + .../Highlight/components/CopyButton/style.ts | 68 + .../components/HighLightJS/index.tsx | 74 + .../Highlight/components/HighLightJS/style.ts | 73 + .../components/HighLighter/index.tsx | 29 + .../Highlight/components/HighLighter/style.ts | 61 + .../components/HighlightCell/index.tsx | 25 + .../components/HighlightCell/style.ts | 26 + .../components/LanguageTag/index.tsx | 69 + .../Highlight/hooks/useHighlight.tsx | 61 + .../Highlight/hooks/useKeyDownCopyEvent.tsx | 69 + .../oss-gpt/components/Highlight/index.tsx | 130 ++ .../oss-gpt/components/Highlight/style.ts | 52 + .../components/Highlight/theme/colors.ts | 933 ++++++++ .../components/Highlight/theme/config.ts | 1964 +++++++++++++++++ .../components/Highlight/theme/index.ts | 3 + .../components/Highlight/theme/type.ts | 7 + .../oss-gpt/components/Markdown/CodeBlock.tsx | 62 + .../oss-gpt/components/Markdown/index.tsx | 71 + .../oss-gpt/components/Markdown/style.ts | 239 ++ .../oss-gpt/components/Markdown/wrapper.tsx | 83 + .../oss-gpt/components/Snippet/index.tsx | 79 + .../oss-gpt/components/Snippet/style.ts | 63 + .../oss-gpt/components/Spotlight/index.tsx | 51 + .../oss-gpt/components/Spotlight/style.ts | 30 + .../ContentScripts/features/oss-gpt/index.css | 1306 +++++++++++ .../ContentScripts/features/oss-gpt/index.tsx | 57 +- .../features/oss-gpt/interface.ts | 95 + .../features/oss-gpt/loading/bubble-end.json | 1001 +++++++++ .../oss-gpt/loading/bubble-start.json | 1001 +++++++++ .../ContentScripts/features/oss-gpt/rcw.scss | 1057 --------- .../features/oss-gpt/service.ts | 62 +- .../ContentScripts/features/oss-gpt/view.tsx | 184 +- yarn.lock | 172 +- 46 files changed, 8428 insertions(+), 1441 deletions(-) create mode 100644 src/helpers/LLM-info.ts create mode 100644 src/helpers/eventEmitter.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/ChatItemRender.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/LoadingEnd.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/LoadingStart.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/OssGpt.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/StarterList.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/UserContent.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/ErrorBoundary.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/LanguageTag/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useHighlight.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useKeyDownCopyEvent.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/colors.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/config.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/index.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/type.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Markdown/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Markdown/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Markdown/wrapper.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Snippet/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Snippet/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Spotlight/index.tsx create mode 100644 src/pages/ContentScripts/features/oss-gpt/components/Spotlight/style.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/index.css create mode 100644 src/pages/ContentScripts/features/oss-gpt/interface.ts create mode 100644 src/pages/ContentScripts/features/oss-gpt/loading/bubble-end.json create mode 100644 src/pages/ContentScripts/features/oss-gpt/loading/bubble-start.json delete mode 100644 src/pages/ContentScripts/features/oss-gpt/rcw.scss diff --git a/package.json b/package.json index da2318fd..08fb38d1 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@ant-design/icons": "^5.4.0", "@ant-design/pro-chat": "^1.9.0", "@ant-design/pro-editor": "^1.3.0", - "@hot-loader/react-dom": "^17.0.2", "@types/chrome": "^0.0.203", "@types/dompurify": "^3.0.5", "@types/react-copy-to-clipboard": "^5.0.7", @@ -50,7 +49,6 @@ "openai": "^4.60.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-chat-widget": "^3.1.4", "react-hot-loader": "^4.13.0", "react-i18next": "^14.1.2", "react-modal": "3.15.1", diff --git a/src/helpers/LLM-info.ts b/src/helpers/LLM-info.ts new file mode 100644 index 00000000..f6fff532 --- /dev/null +++ b/src/helpers/LLM-info.ts @@ -0,0 +1,15 @@ +export const saveLLMInfo = (baseUrl: string, apiKey: string, modelName: string) => { + localStorage.setItem('baseUrl', baseUrl); + localStorage.setItem('apiKey', apiKey); + localStorage.setItem('modelName', modelName); +}; +export const getLLMInfo = () => { + const baseUrl = localStorage.getItem('baseUrl') || ''; + const apiKey = localStorage.getItem('apiKey') || ''; + const modelName = localStorage.getItem('modelName') || ''; + return { + baseUrl, + apiKey, + modelName, + }; +}; diff --git a/src/helpers/eventEmitter.ts b/src/helpers/eventEmitter.ts new file mode 100644 index 00000000..c1cedb0a --- /dev/null +++ b/src/helpers/eventEmitter.ts @@ -0,0 +1,3 @@ +import { EventEmitter } from 'events'; +const eventEmitter = new EventEmitter(); +export default eventEmitter; diff --git a/src/helpers/get-repo-info.ts b/src/helpers/get-repo-info.ts index 08b0bfe2..7337d684 100644 --- a/src/helpers/get-repo-info.ts +++ b/src/helpers/get-repo-info.ts @@ -31,3 +31,6 @@ export async function isPublicRepo() { export async function isPublicRepoWithMeta() { return (await isPublicRepo()) && (await metaStore.has(getRepoName())); } +export function getUsername() { + return pageDetect.utils.getUsername(); +} diff --git a/src/manifest.json b/src/manifest.json index 0a1ef91b..2bdf0e81 100755 --- a/src/manifest.json +++ b/src/manifest.json @@ -15,7 +15,7 @@ "matches": ["*://github.com/*"], "js": ["contentScript.bundle.js"], "css": ["contentScript.css"], - "run_at": "document_start" + "run_at": "document_idle" } ], "web_accessible_resources": [ diff --git a/src/pages/ContentScripts/features/oss-gpt/ChatItemRender.tsx b/src/pages/ContentScripts/features/oss-gpt/ChatItemRender.tsx new file mode 100644 index 00000000..d1c5481c --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/ChatItemRender.tsx @@ -0,0 +1,43 @@ +import React, { type FC } from 'react'; +import './index.css'; + +interface IProps { + direction: 'start' | 'end'; + avatar?: any; + title: React.ReactNode; + content: React.ReactNode; + starter?: React.ReactNode; +} + +const ChatItemRender: FC = ({ direction, avatar, title, content, starter = <> }) => { + return ( + <> +
+ {direction === 'start' && ( +
+ )} +
+ {title} + {content} +
+
+ {starter} + + ); +}; + +export default ChatItemRender; diff --git a/src/pages/ContentScripts/features/oss-gpt/LoadingEnd.tsx b/src/pages/ContentScripts/features/oss-gpt/LoadingEnd.tsx new file mode 100644 index 00000000..7a14bacc --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/LoadingEnd.tsx @@ -0,0 +1,36 @@ +import Lottie from 'lottie-react'; +import React, { useState } from 'react'; + +const LoadingAnimationEnd = require('./loading/bubble-end.json'); + +interface LoadingEndProps { + children?: React.ReactNode; + onComplete?: () => void; +} + +const LoadingEnd: React.FC = (props) => { + const { children, onComplete } = props; + + const [complete, setComplete] = useState(false); + + const handleComplete = () => { + setComplete(true); + }; + + if (complete) { + return <>{children}; + } + + return ( +
+ +
+ ); +}; + +export default LoadingEnd; diff --git a/src/pages/ContentScripts/features/oss-gpt/LoadingStart.tsx b/src/pages/ContentScripts/features/oss-gpt/LoadingStart.tsx new file mode 100644 index 00000000..03b82507 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/LoadingStart.tsx @@ -0,0 +1,20 @@ +import Lottie from 'lottie-react'; +import React from 'react'; +const LoadingAnimationStart = require('./loading/bubble-start.json'); + +interface LoadingStartProps { + loop?: boolean; + onComplete?: () => void; +} + +const LoadingStart: React.FC = (props) => { + const { onComplete, loop = true } = props; + + return ( +
+ +
+ ); +}; + +export default LoadingStart; diff --git a/src/pages/ContentScripts/features/oss-gpt/OssGpt.tsx b/src/pages/ContentScripts/features/oss-gpt/OssGpt.tsx new file mode 100644 index 00000000..e4b4f01e --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/OssGpt.tsx @@ -0,0 +1,340 @@ +import React, { useEffect, useState, useRef } from 'react'; +import { ProChat, ProChatProvider, ProChatInstance, ChatItemProps } from '@ant-design/pro-chat'; +import { useTheme, ThemeProvider } from 'antd-style'; +import { Button, Card, Form, Input, theme } from 'antd'; +import { getUsername } from '../../../../helpers/get-repo-info'; +import { getResponse, convertChunkToJson } from './service'; +import StarterList from './StarterList'; +import ChatItemRender from './ChatItemRender'; +import UserContent from './UserContent'; +import LoadingStart from './LoadingStart'; +import LoadingEnd from './LoadingEnd'; +import Markdown from './components/Markdown'; +import type { FormProps } from 'antd'; +import { v4 as uuidv4 } from 'uuid'; +import { saveLLMInfo, getLLMInfo } from '../../../../helpers/LLM-info'; +import { ChatOpenAI } from '@langchain/openai'; +type FieldType = { + baseUrl: string; + apiKey: string; + modelName: string; +}; + +const Chat: React.FC = () => { + const proChatRef = useRef(); + const [complete, setComplete] = useState(false); + const [chats, setChats] = useState([]); + const [llmInstance, setLLMInstance] = useState(null); // 保存 LLM 实例 + const [modelConfig, setModelConfig] = useState(null); + const theme = useTheme(); + const username = getUsername(); + const avatar = 'https://avatars.githubusercontent.com/u/57651122?s=200&v=4'; + const title = ''; + const helloMessage = ''; + // const starters:string[]=[] + const starters = ['你好', '介绍一下']; + const botInfo = { + assistantMeta: { + avatar: avatar, + title: title, + }, + helloMessage: helloMessage, + starters: starters, + }; + + const testLLMInstance = async (config: any) => { + const { baseUrl, apiKey, modelName } = config; + const testLLM = new ChatOpenAI({ + apiKey, + configuration: { baseURL: baseUrl, fetch }, + model: modelName, + temperature: 0.95, + maxRetries: 3, + }); + + try { + const response = await testLLM.invoke([{ role: 'user', content: '你好' }]); + return response; // 返回模型的回答 + } catch (error) { + return null; + } + }; + const onFinish: FormProps['onFinish'] = async (values) => { + saveLLMInfo(values.baseUrl, values.apiKey, values.modelName); + setModelConfig(values); + createLLMInstance(values); + + const testResponse = await testLLMInstance(values); + if (testResponse == null) { + setChats([ + ...chats, + { + content: '配置信息有误，请再次确认，输入正确的信息', + id: uuidv4(), + role: 'assistant', + avatar: avatar, + title: '', + updateAt: Date.now(), + createAt: Date.now(), + }, + ]); + } else { + setChats([]); + } + }; + const UserForm = (props: { name: string; gender: string; model: string }) => { + return ( + +
+ + + + + + + + + + + + + +
+ + ); + }; + const createLLMInstance = (config: any) => { + const { baseUrl, apiKey, modelName } = config; + const model = new ChatOpenAI({ + apiKey, + configuration: { baseURL: baseUrl, fetch }, + model: modelName, + temperature: 0.95, + maxRetries: 3, + }); + setLLMInstance(model); + setModelConfig(config); + }; + useEffect(() => { + // 在组件加载时检查并创建 LLM 实例 + const info = getLLMInfo(); + if (info.baseUrl && info.apiKey && info.modelName) { + createLLMInstance(info); + } + }, []); + return ( +
+ { + if (!llmInstance) { + // 插入一条消息，提示用户先填写配置信息 + setChats([ + { + content: JSON.stringify({}), + id: uuidv4(), + role: 'user-form', + avatar: avatar, + title: '', + updateAt: Date.now(), + createAt: Date.now(), + }, + ]); + return; + } + try { + return await getResponse(messages.at(-1)?.content?.toString(), llmInstance); + } catch (error: any) { + return error.message; + } + }} + actions={{ + render: (defaultDoms) => { + return [ + { + console.log; + setChats([ + { + content: JSON.stringify({}), + id: uuidv4(), + role: 'user-form', + avatar: avatar, + title: '', + updateAt: Date.now(), + createAt: Date.now(), + }, + ]); + }} + > + 选择模型 + , + ...defaultDoms, + ]; + }, + flexConfig: { + gap: 24, + direction: 'horizontal', + justify: 'space-between', + }, + }} + chatItemRenderConfig={{ + render: ( + props: ChatItemProps, + domsMap: { + avatar: React.ReactNode; + title: React.ReactNode; + messageContent: React.ReactNode; + actions: React.ReactNode; + itemDom: React.ReactNode; + }, + defaultDom: React.ReactNode + ): React.ReactNode => { + const originData = props.originData || {}; + const isDefault = originData.role === 'hello'; + if (isDefault) { + return ( + +
+
+ Hello！ + {botInfo.assistantMeta?.title} +
+
{props.message}
+
+
+ } + starter={ + { + proChatRef?.current?.sendMessage(msg); + }} + className="ml-[72px]" + /> + } + /> + ); + } + if (originData?.role === 'user-form') { + return ( + + +
+ } + /> + ); + } + if (originData?.role === 'user') { + try { + const content = JSON.parse(originData.content) as string[]; + const { text } = content.reduce( + (acc, item) => { + acc.text += text; + return acc; + }, + { text: '' } + ); + return } />; + } catch (err) { + return defaultDom; + } + } + const originMessage = convertChunkToJson(originData.content) as any; + // Default message content + const defaultMessageContent =
{defaultDom}
; + // If originMessage is invalid, return default message content + if ((!originMessage || typeof originMessage === 'string') && !!proChatRef?.current?.getChatLoadingId()) { + return ( + + ); + } + const { message: answerStr } = originMessage; + // Handle chat loading state + if (!!proChatRef?.current?.getChatLoadingId() && answerStr === '...') { + return ( + + setComplete(true)} /> + + } + /> + ); + } + return ( + + + + {answerStr} + + + + } + /> + ); + }, + }} + /> + + ); +}; +const OssGpt: React.FC = () => ( + + + +); +export default OssGpt; diff --git a/src/pages/ContentScripts/features/oss-gpt/StarterList.tsx b/src/pages/ContentScripts/features/oss-gpt/StarterList.tsx new file mode 100644 index 00000000..eea500f1 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/StarterList.tsx @@ -0,0 +1,36 @@ +import React, { type FC } from 'react'; +import { SunOutlined } from '@ant-design/icons'; +import './index.css'; +export interface IProps { + starters: string[]; + onClick?: (msg: string) => void; + style?: React.CSSProperties; + className?: string; +} + +const StarterList: FC = ({ starters, onClick, style, className }) => { + return ( +
+ {starters?.map((starterStr) => { + return ( +
+ { + onClick?.(starterStr); + }} + > + {starterStr} + + +
+ ); + })} +
+ ); +}; + +export default StarterList; diff --git a/src/pages/ContentScripts/features/oss-gpt/UserContent.tsx b/src/pages/ContentScripts/features/oss-gpt/UserContent.tsx new file mode 100644 index 00000000..5aa6be24 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/UserContent.tsx @@ -0,0 +1,25 @@ +import Markdown from './components/Markdown'; +import React, { type FC } from 'react'; +import './index.css'; +interface IProps { + text: string; +} + +const UserContent: FC = ({ text }) => { + return ( +
+ {text && ( + + {text} + + )} +
+ ); +}; + +export default UserContent; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/ErrorBoundary.tsx b/src/pages/ContentScripts/features/oss-gpt/components/ErrorBoundary.tsx new file mode 100644 index 00000000..ebb652fa --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/ErrorBoundary.tsx @@ -0,0 +1,31 @@ +import React, { Component } from 'react'; + +class ErrorBoundary extends Component { + constructor(props: any) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(error: any) { + // 更新 state 以触发降级 UI + return { hasError: true }; + } + + componentDidCatch(error: any, info: any) { + // 你可以在这里记录错误信息，或者发送到外部监控服务 + console.error('Error in component:', error); + console.error('Component stack:', info.componentStack); + } + + render() { + if (this.state.hasError) { + // 渲染回退的 UI + console.log(this.state); + return

Something went wrong.

; + } + + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/index.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/index.tsx new file mode 100644 index 00000000..c028c8b3 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/index.tsx @@ -0,0 +1,56 @@ +import { CheckOutlined, CopyOutlined } from '@ant-design/icons'; +import classNames from 'classnames'; +import { useEffect, useState } from 'react'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import { ThemeType } from '../../theme'; +import { useStyles } from './style'; +import React from 'react'; +interface CopyButtonProps { + content: any; + /** + * @title Call back after clicking the copy button + */ + onCopy?: (content: any) => void; + /** + * @title theme + * @description Theme color, dark black theme, light white theme + * @default "light" + */ + theme?: ThemeType; + style?: React.CSSProperties; +} + +const CopyButton: React.FC = (props) => { + const { content, onCopy, theme = 'light', style } = props; + const [copyId, setCopyId] = useState(); + const { styles } = useStyles({ theme }); + + useEffect(() => { + return () => { + window.clearTimeout(copyId); + }; + }); + const [copied, setCopied] = useState(false); + return ( + <> + { + setCopied(true); + const tempCopyId = window.setTimeout(() => { + setCopied(false); + }, 2000); + setCopyId(tempCopyId); + if (onCopy) onCopy(content); + }} + > + + + + ); +}; + +export default CopyButton; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/style.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/style.ts new file mode 100644 index 00000000..b292d6b9 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/CopyButton/style.ts @@ -0,0 +1,68 @@ +import { createStyles } from '@ant-design/pro-editor'; +import { getThemeColor } from '../../theme/colors'; + +export const useStyles = createStyles(({ css, token, prefixCls, cx }, props) => { + const { theme } = props as { theme: unknown }; + const prefix = `${prefixCls}-${token.editorPrefix}-highlight`; + const { colorFillTertiary, colorText } = getThemeColor(theme === 'dark'); + + return { + copy: cx( + `${prefix}-copy`, + css` + position: absolute; + top: 16px; + right: 16px; + display: flex; + flex-direction: column; + width: 16px; + height: 16px; + padding: 0; + overflow: hidden; + border: 0; + outline: none; + cursor: pointer; + opacity: 0.6; + transition: opacity 0.2s; + background-color: ${colorFillTertiary}; + + &:hover { + opacity: 0.8; + } + ` + ), + copyIcon: cx( + `${prefix}-copy-icon`, + css` + width: 16px; + color: ${colorText}; + height: 16px; + font-size: 16px; + + @keyframes copy-button-trans { + 0% { + margin-top: 0; + opacity: 0.8; + } + 10% { + margin-top: -16px; + opacity: 0.8; + } + 90% { + margin-top: -16px; + opacity: 0.8; + } + 100% { + margin-top: 0; + opacity: 0.8; + } + } + + &.scoll { + animation: copy-button-trans 2s; + animation-play-state: running; + } + ` + ), + }; +}); diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/index.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/index.tsx new file mode 100644 index 00000000..2b70e6aa --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/index.tsx @@ -0,0 +1,74 @@ +/** + *Highlighting ability based on the syntax parsing capability of highlight.exe https://highlightjs.org/ + *The well-known languages I have heard of are included in Langugaes. If you need to add a new language, please add it to the languages folder and import it for use, and add it to the languageMap + *If not in https://github.com/highlightjs/highlight.js/tree/master/src/languages Check if it is supported and then add it + *Priority support for mainstream languages, those used in code without imports will not be packaged + */ +import classNames from 'classnames'; +import { memo, useEffect, useState } from 'react'; +import { useHighlight, LanguageKeys, languageMap } from '../../hooks/useHighlight'; +import { HighlightProps } from '../../index'; +import { THEME_LIGHT } from '../../theme'; +import HighlightCell from '../HighlightCell'; +import { useStyles } from './style'; +import React from 'react'; +export type HighLighJSProps = Pick; +const isValidLanguage = (lang: string): lang is LanguageKeys => { + return Object.keys(languageMap).includes(lang); +}; + +const HighLighJS: React.FC = memo((props) => { + const { children, lineNumber = false, theme = THEME_LIGHT, language } = props; + const [codeBlock, setCodeBlock] = useState([]); + const { styles } = useStyles(theme); + let validLanguage: LanguageKeys | undefined; + if (language && isValidLanguage(language)) { + validLanguage = language; // Now the validLanguage type is LanguageKeys | undefined + } + const { renderHighlight } = useHighlight(validLanguage); + + const highlightCode = () => { + // Skip rendering when data is empty + if (!children) { + return; + } + + // Construct a table to display the codeblock + const value = renderHighlight(children); + const lines = value.split(/\r?\n/); + let nonEmptyIndex = lines.length - 1; + while (nonEmptyIndex >= 0 && lines[nonEmptyIndex].trim() === '') { + nonEmptyIndex--; + } + const sourceData = lines.slice(0, nonEmptyIndex + 1); + // The content required to construct the entire list (line numbers and content) + const rowList = sourceData.map((rowValue, index) => ({ + value: rowValue, + index: index + 1, + })); + setCodeBlock( + rowList.map((src, index) => { + return ( + + + + ); + }) + ); + }; + + // Trigger re rendering + useEffect(() => { + highlightCode(); + }, [children, theme, language, lineNumber]); + + return ( + 
+      
+        {codeBlock}
+      

+
+ ); +}); + +export default HighLighJS; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/style.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/style.ts new file mode 100644 index 00000000..e6832d9c --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLightJS/style.ts @@ -0,0 +1,73 @@ +import { createStyles } from '@ant-design/pro-editor'; +import { getThemeColor } from '../../theme/colors'; + +export const useStyles = createStyles(({ css, cx }, theme) => { + const { colorBlue, colorGreen, colorOrange, colorRed, colorText, colorTextSecondary, colorTextTertiary } = + getThemeColor(theme === 'dark'); + + return { + theme: cx(css` + display: block; + overflow-x: auto; + color: ${colorText}; + background-color: ${colorTextSecondary}; + + /* Comment */ + .hljs-comment, + .hljs-quote { + color: ${colorTextTertiary}; + } + + /* Red */ + .hljs-variable, + .hljs-attribute, + .hljs-template-variable, + .hljs-tag, + .hljs-name, + .hljs-selector-id, + .hljs-selector-class, + .hljs-regexp, + .hljs-title, + .hljs-deletion { + color: ${colorRed}; + } + + /* Orange */ + + .hljs-builtin-name, + .hljs-literal, + .hljs-type, + .hljs-params, + .hljs-meta, + .hljs-link { + color: ${colorOrange}; + } + + /* Green */ + .hljs-string, + .hljs-number, + .hljs-symbol, + .hljs-bullet, + .hljs-addition { + color: ${colorGreen}; + } + + /* Blue */ + .hljs-keyword, + .hljs-doctag, + .hljs-built_in, + .hljs-selector-tag, + .hljs-section { + color: ${colorBlue}; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: bold; + } + `), + }; +}); diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/index.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/index.tsx new file mode 100644 index 00000000..0d42010b --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/index.tsx @@ -0,0 +1,29 @@ +/** + *Highlighting ability based on the syntax parsing capability of highlight.exe https://highlightjs.org/ + *The well-known languages I have heard of are included in Langugaes. If you need to add a new language, please add it to the languages folder and import it for use, and add it to the languageMap + *If not in https://github.com/highlightjs/highlight.js/tree/master/src/languages Check if it is supported and then add it + *Priority support for mainstream languages, those used in code without imports will not be packaged + */ +import { THEME_LIGHT } from '../../theme'; +import { memo, useMemo } from 'react'; +import { HighlightProps } from '../../index'; +import HighLightJS from '../HighLightJS'; +import React from 'react'; +export type Props = Pick; + +const HighLighter: React.FC = memo((props) => { + const { children, lineNumber = false, theme = THEME_LIGHT, language } = props; + + const HighlightJSBlock = useMemo( + () => ( + + {children} + + ), + [lineNumber, theme, language, children] + ); + + return HighlightJSBlock; +}); + +export default HighLighter; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/style.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/style.ts new file mode 100644 index 00000000..2e5f7bad --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighLighter/style.ts @@ -0,0 +1,61 @@ +import { createStyles } from '@ant-design/pro-editor'; +import { getThemeColor } from '../../theme/colors'; +interface Props { + lineNumber: any; + theme: any; +} +export const useStyles = createStyles(({ css, cx, token, prefixCls }, props: Props) => { + const { lineNumber, theme } = props; + const prefix = `${prefixCls}-${token.editorPrefix}-highlight`; + const { colorTextTertiary } = getThemeColor(theme === 'dark'); + + const lineNumberStyle = css` + code { + counter-reset: step; + counter-increment: step 0; + } + + code .line::before { + content: counter(step); + counter-increment: step; + width: 1rem; + margin-right: 1.5rem; + display: inline-block; + text-align: right; + color: rgba(115, 138, 148, 0.4); + user-select: none; + } + `; + return { + shiki: cx( + `${prefix}-shiki`, + css` + .shiki { + overflow-x: scroll; + background: none !important; + ${lineNumber ? lineNumberStyle : ''} + } + ` + ), + loading: cx(css` + color: ${colorTextTertiary}; + `), + center: cx(css` + backdrop-filter: saturate(180%) blur(10px); + position: absolute; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + + height: 36px; + padding: 0 8px; + + font-family: ${token.fontFamilyCode}; + color: ${colorTextTertiary}; + + border-radius: ${token.borderRadius}; + `), + }; +}); diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/index.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/index.tsx new file mode 100644 index 00000000..fe852c92 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/index.tsx @@ -0,0 +1,25 @@ +import classNames from 'classnames'; +import { useStyles } from './style'; +import React from 'react'; +export interface HighlightCellProps { + data: { index: number; value: string }; + emptyText?: string; + onMouseDown?: React.MouseEventHandler; + lineNumber?: boolean; +} + +export default function HighlightCell({ data, emptyText, lineNumber = false, onMouseDown }: HighlightCellProps) { + const { styles } = useStyles(); + const rowIndex: number = data?.index; + + return ( + <> + {lineNumber ? {rowIndex} : null} + + + ); +} diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/style.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/style.ts new file mode 100644 index 00000000..700d26dc --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/HighlightCell/style.ts @@ -0,0 +1,26 @@ +import { createStyles } from '@ant-design/pro-editor'; + +export const useStyles = createStyles(({ css, cx, token, prefixCls }) => { + const prefix = `${prefixCls}-${token.editorPrefix}-highlight`; + + return { + index: cx( + `${prefix}-index`, + css` + box-sizing: border-box; + width: 1rem; + margin-right: 1.5rem; + display: inline-block; + color: rgba(115, 138, 148, 0.4); + text-align: right; + user-select: none; + ` + ), + content: cx( + `${prefix}-content`, + css` + width: 100%; + ` + ), + }; +}); diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/LanguageTag/index.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/LanguageTag/index.tsx new file mode 100644 index 00000000..772a35fc --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/components/LanguageTag/index.tsx @@ -0,0 +1,69 @@ +import { ThemeType } from '../../theme'; +import { Tag, type TagProps as AntTagProps } from 'antd'; +import Color from 'color'; +import { ReactNode } from 'react'; +import { createStyles } from '@ant-design/pro-editor'; +import { getThemeColor } from '../../theme/colors'; +import React from 'react'; +const useStyles = createStyles(({ cx, css, token, prefixCls }, props) => { + const { theme } = props as { theme: unknown }; + const prefix = `${prefixCls}-${token.editorPrefix}-highlight`; + + const { colorFillTertiary, colorText, colorTextSecondary } = getThemeColor(theme === 'dark'); + + const background = Color(colorFillTertiary) + ?.mix(Color(theme === 'dark' ? 'white' : 'black'), 0.03) + .alpha(0.9) + .hsl() + .string(); + + return { + small: cx( + `${prefix}-tag-small`, + css` + padding: 2px 6px; + line-height: 1; + ` + ), + lang: cx(css` + position: absolute; + z-index: 2; + right: 0; + bottom: 8px; + background-color: ${background}; + font-family: ${token.fontFamilyCode}; + color: ${colorTextSecondary}; + transition: opacity 0.1s; + `), + tag: cx( + `${prefix}-tag`, + css` + color: ${colorText} !important; + border-radius: ${token.borderRadius}px; + P &:hover { + color: ${colorText}; + background: ${token.colorFill}; + } + ` + ), + }; +}); + +export interface TagProps extends AntTagProps { + icon?: ReactNode; + size?: 'default' | 'small'; + theme?: ThemeType; +} + +const LanguageTag: React.FC = (props) => { + const { children, size = 'default', theme = 'light' } = props || {}; + const { styles, cx } = useStyles({ theme }); + + return ( + + {children} + + ); +}; + +export default LanguageTag; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useHighlight.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useHighlight.tsx new file mode 100644 index 00000000..1c7ecf7d --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useHighlight.tsx @@ -0,0 +1,61 @@ +import hljs from 'highlight.js/lib/core'; +import { default as bash, default as sh } from 'highlight.js/lib/languages/bash'; +import css from 'highlight.js/lib/languages/css'; +import java from 'highlight.js/lib/languages/java'; +import { default as javascript, default as jsx } from 'highlight.js/lib/languages/javascript'; +import json from 'highlight.js/lib/languages/json'; +import markdown from 'highlight.js/lib/languages/markdown'; +import python from 'highlight.js/lib/languages/python'; +import sql from 'highlight.js/lib/languages/sql'; +import { default as tsx, default as typescript } from 'highlight.js/lib/languages/typescript'; +import xml from 'highlight.js/lib/languages/xml'; +import yaml from 'highlight.js/lib/languages/yaml'; +import cpp from 'highlight.js/lib/languages/cpp'; +import c from 'highlight.js/lib/languages/c'; +import php from 'highlight.js/lib/languages/php'; +import { useEffect } from 'react'; + +// List of currently supported languages +export const languageMap = { + javascript, + typescript, + css, + json, + markdown, + xml, + yaml, + tsx, + jsx, + java, + python, + sql, + bash, + sh, + cpp, + php, + c, +}; +export type LanguageKeys = keyof typeof languageMap; +export const useHighlight = (language?: LanguageKeys) => { + // Load languages on demand + useEffect(() => { + if (language && languageMap[language]) { + hljs.registerLanguage(language, languageMap[language]); + } else { + Object.keys(languageMap).forEach((lan) => { + hljs.registerLanguage(lan, languageMap[lan as LanguageKeys]); + }); + } + }, [language]); + + const renderHighlight = (content: string) => { + let result = ''; + if (language && languageMap[language]) { + result = hljs.highlight(content || '', { language: language, ignoreIllegals: true }).value; + } else { + result = hljs.highlightAuto(content).value; + } + return result; + }; + return { renderHighlight }; +}; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useKeyDownCopyEvent.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useKeyDownCopyEvent.tsx new file mode 100644 index 00000000..607bb865 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/hooks/useKeyDownCopyEvent.tsx @@ -0,0 +1,69 @@ +import { useEffect, useRef } from 'react'; + +/** + *The ability to select all buttons when adding focus to Highlight + * @param codeRef: React. RefObject + */ + +export const useKeyDownCopyEvent = ( + codeRef: React.RefObject, + onCopy: (children: any) => void +) => { + //Focus capability support + const focus = useRef(); + + function bindEvent(events: any, dom: any) { + Object.keys(events).forEach((key) => { + if (typeof events[key] === 'object' && events[key].handle) { + dom.addEventListener(key, events[key].handle, events[key].options); + } else { + dom.addEventListener(key, events[key]); + } + }); + return function () { + Object.keys(events).forEach((key) => { + if (typeof events[key] === 'object' && events[key].handle) { + dom.removeEventListener(key, events[key].handle, events[key].options); + } else { + dom.removeEventListener(key, events[key]); + } + }); + }; + } + + useEffect(() => { + if (codeRef.current) { + return bindEvent( + { + keydown: (ev: any) => { + const selection = window.getSelection(); + //Intercept Ctrl+A and determine if it is focused + if ((ev.ctrlKey || ev.metaKey) && ev.code === 'KeyA' && focus.current && codeRef.current) { + const range = document.createRange(); + range.selectNodeContents(codeRef.current); + selection?.removeAllRanges(); + selection?.addRange(range); + ev.preventDefault(); + } + + if ((ev.ctrlKey || ev.metaKey) && ev.code === 'KeyC' && focus.current && codeRef.current) { + if (onCopy && selection) { + onCopy(selection.toString()); + } + } + }, + focus: () => { + focus.current = true; + }, + blur: () => { + focus.current = false; + }, + }, + codeRef.current + ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [codeRef.current, codeRef]); + + return null; +}; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/index.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/index.tsx new file mode 100644 index 00000000..eb64a177 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/index.tsx @@ -0,0 +1,130 @@ +import { ConfigProvider } from '@ant-design/pro-editor'; +import { useThemeMode } from 'antd-style'; +import classNames from 'classnames'; +import { createRef, memo } from 'react'; +import CopyButton from './components/CopyButton'; +import HighLighter from './components/HighLighter'; +import LanguageTag from './components/LanguageTag'; +import { useKeyDownCopyEvent } from './hooks/useKeyDownCopyEvent'; + +import { useStyles } from './style'; +import { THEME_AUTO, ThemeType } from './theme'; +import React from 'react'; +const HIGHLIGHT_LANGUAGES = [ + 'javascript', + 'typescript', + 'css', + 'json', + 'markdown', + 'xml', + 'yaml', + 'tsx', + 'jsx', + 'java', + 'python', + 'sql', + 'bash', + 'sh', + 'cpp', + 'php', + 'c', +]; +export interface HighlightProps { + /** + * @description 样式 + * @ignore + */ + style?: React.CSSProperties; + /** + * @description className 类名 + * @ignore + */ + className?: string; + /** + * @title 指定语言 + * @description 指定语言 + * @renderType select + * @default "typescript" + */ + language?: string; + /** + * @title 主题 + * @description 主题颜色, dark 黑色主题，light 白色主题 + * @default "light" + */ + theme?: ThemeType; + /** + * @title 高亮内容 + * @description 高亮内容 + */ + children?: any; + /** + * @title 是否使用要使用行号 + * @description 是否需要展示代码块左侧的行号 + * @default false + */ + lineNumber?: boolean; + /** + * @title 是否展示复制按钮 + * @description 是否需要展示复制按钮 + * @default true + */ + copyable?: boolean; + /** + * @title 复制按钮点击后回调 + */ + onCopy?: (children: any) => void; + /** + * 高亮类型 + */ + type?: 'pure' | 'block'; + /** + * 是否需默认展示语言种类 + */ + showLanguage?: boolean; +} + +const BaseHighlight: React.FC = memo((props) => { + const { + children, + style, + className, + lineNumber = false, + copyable = true, + theme: outTheme = THEME_AUTO, + language = 'tsx', + showLanguage = true, + type = 'block', + onCopy, + } = props; + // 当为 auto 的时候，根据系统主题来判断 + const { appearance } = useThemeMode(); + const ProviderTheme = appearance === 'dark' ? 'dark' : 'light'; + const theme = outTheme === THEME_AUTO ? ProviderTheme : outTheme; + const { styles } = useStyles({ theme, type }); + const emptyFunction = (children: any) => {}; + const codeRef = createRef(); + const safeOnCopy = onCopy ? onCopy : emptyFunction; + + useKeyDownCopyEvent(codeRef, safeOnCopy); + + return ( +
+ {copyable && } + {showLanguage && language && {language.toLowerCase()}} + + {children} + +
+ ); +}); + +const Highlight = (props: HighlightProps) => { + return ( + + + + ); +}; + +export { HIGHLIGHT_LANGUAGES, Highlight }; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/style.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/style.ts new file mode 100644 index 00000000..b92d3327 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/style.ts @@ -0,0 +1,52 @@ +import { createStyles } from '@ant-design/pro-editor'; +import { getThemeColor } from './theme/colors'; + +interface IHighlightStyleProps { + type: 'pure' | 'block'; + theme: 'light' | 'dark' | 'auto'; +} + +export const useStyles = createStyles(({ css, cx, token, prefixCls }, { theme, type }: IHighlightStyleProps) => { + const prefix = `${prefixCls}-${token?.editorPrefix}-highlight`; + + const { colorFillTertiary } = getThemeColor(theme === 'dark'); + + const typeStylish = css` + background-color: ${type === 'block' ? colorFillTertiary : 'transparent'}; + `; + + return { + container: cx( + `${prefix}-container`, + typeStylish, + css` + position: relative; + margin: 0; + border-radius: ${token.borderRadius}px; + transition: background-color 100ms ${token.motionEaseOut}; + + :not(:hover) { + .${prefix}-copy { + visibility: hidden; + opacity: 0; + } + + .${prefix}-tag { + visibility: hidden; + opacity: 0; + } + } + + pre { + margin: 0 !important; + padding: ${type === 'pure' ? 0 : `16px 24px`} !important; + background: none !important; + } + + code { + background: transparent !important; + } + ` + ), + }; +}); diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/colors.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/colors.ts new file mode 100644 index 00000000..b8f6f953 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/colors.ts @@ -0,0 +1,933 @@ +type colorStep = [ + string, + string, + string, + string, + string, + string, + string, + string, + string, + string, + string, + string, + string, +]; + +export interface ColorScaleItem { + dark: colorStep; + darkA: colorStep; + light: colorStep; + lightA: colorStep; +} + +export interface ColorScales { + blue: ColorScaleItem; + bnw: ColorScaleItem; + cyan: ColorScaleItem; + geekblue: ColorScaleItem; + gold: ColorScaleItem; + gray: ColorScaleItem; + green: ColorScaleItem; + lime: ColorScaleItem; + magenta: ColorScaleItem; + orange: ColorScaleItem; + purple: ColorScaleItem; + red: ColorScaleItem; + volcano: ColorScaleItem; + yellow: ColorScaleItem; +} + +export const colorScales: ColorScales = { + red: { + light: [ + '#ffffff', + '#fff7f7', + '#ffeced', + '#ffdde2', + '#ffccd5', + '#ffb8c7', + '#ffa2b8', + '#ff88a8', + '#fe6998', + '#f04f88', + '#a72860', + '#640039', + '#0f0006', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(255, 55, 55, 0.04)', + 'rgba(255, 17, 30, 0.08)', + 'rgba(255, 12, 48, 0.14)', + 'rgba(255, 0, 45, 0.2)', + 'rgba(255, 1, 55, 0.28)', + 'rgba(255, 4, 63, 0.37)', + 'rgba(255, 2, 70, 0.47)', + 'rgba(253, 1, 80, 0.59)', + 'rgba(233, 0, 83, 0.69)', + 'rgba(151, 2, 68, 0.85)', + '#640039', + '#0f0006', + ], + dark: [ + '#0f0006', + '#34001d', + '#4b002b', + '#640039', + '#7a0c46', + '#911b53', + '#a72860', + '#bf356e', + '#d7427b', + '#f04f88', + '#ff8eab', + '#ffc9d3', + '#ffffff', + ], + darkA: [ + 'rgba(250, 0, 100, 0.06)', + 'rgba(248, 0, 138, 0.21)', + 'rgba(250, 0, 143, 0.3)', + 'rgba(250, 0, 142, 0.4)', + 'rgba(254, 25, 146, 0.48)', + 'rgba(254, 47, 146, 0.57)', + 'rgba(253, 61, 145, 0.66)', + 'rgba(255, 71, 147, 0.75)', + 'rgba(253, 78, 145, 0.85)', + 'rgba(255, 84, 145, 0.94)', + '#ff8eab', + '#ffc9d3', + '#ffffff', + ], + }, + volcano: { + light: [ + '#ffffff', + '#fff7f6', + '#ffece9', + '#ffded9', + '#ffcec5', + '#ffbbaf', + '#ffa695', + '#ff8e78', + '#fb745a', + '#ec5e41', + '#a53716', + '#5d1900', + '#0c0100', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(255, 55, 30, 0.04)', + 'rgba(255, 44, 11, 0.09)', + 'rgba(255, 35, 2, 0.15)', + 'rgba(255, 42, 3, 0.23)', + 'rgba(255, 43, 5, 0.32)', + 'rgba(255, 43, 3, 0.42)', + 'rgba(255, 42, 0, 0.53)', + 'rgba(249, 41, 1, 0.65)', + 'rgba(230, 40, 2, 0.75)', + 'rgba(157, 38, 2, 0.92)', + '#5d1900', + '#0c0100', + ], + dark: [ + '#0c0100', + '#2f0a00', + '#451200', + '#5d1900', + '#762000', + '#8e2a07', + '#a53716', + '#bc4424', + '#d45132', + '#ec5e41', + '#ff9480', + '#ffcbc3', + '#ffffff', + ], + darkA: [ + 'rgba(240, 20, 0, 0.05)', + 'rgba(247, 53, 0, 0.19)', + 'rgba(246, 64, 0, 0.28)', + 'rgba(251, 68, 0, 0.37)', + 'rgba(251, 68, 0, 0.47)', + 'rgba(254, 75, 12, 0.56)', + 'rgba(254, 85, 34, 0.65)', + 'rgba(254, 92, 49, 0.74)', + 'rgba(255, 98, 60, 0.83)', + 'rgba(254, 101, 70, 0.93)', + '#ff9480', + '#ffcbc3', + '#ffffff', + ], + }, + orange: { + light: [ + '#ffffff', + '#fff9f8', + '#fff0ec', + '#ffe6dd', + '#ffd9ca', + '#ffcbb5', + '#ffbb9c', + '#ffaa7f', + '#ff975c', + '#ff802b', + '#a75400', + '#552d00', + '#080300', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(255, 55, 22, 0.03)', + 'rgba(255, 67, 17, 0.08)', + 'rgba(255, 76, 12, 0.14)', + 'rgba(255, 74, 3, 0.21)', + 'rgba(255, 76, 0, 0.29)', + 'rgba(255, 81, 1, 0.39)', + 'rgba(255, 88, 4, 0.51)', + 'rgba(255, 93, 0, 0.64)', + 'rgba(255, 102, 0, 0.83)', + '#a75400', + '#552d00', + '#080300', + ], + dark: [ + '#080300', + '#271400', + '#3d2000', + '#552d00', + '#6f3a00', + '#8a4700', + '#a75400', + '#c66100', + '#e37013', + '#ff802b', + '#ffae87', + '#ffd7c8', + '#ffffff', + ], + darkA: [ + 'rgba(200, 75, 0, 0.04)', + 'rgba(244, 125, 0, 0.16)', + 'rgba(254, 133, 0, 0.24)', + 'rgba(250, 132, 0, 0.34)', + 'rgba(252, 132, 0, 0.44)', + 'rgba(251, 129, 0, 0.55)', + 'rgba(253, 127, 0, 0.66)', + 'rgba(254, 124, 0, 0.78)', + 'rgba(255, 126, 21, 0.89)', + '#ff802b', + '#ffae87', + '#ffd7c8', + '#ffffff', + ], + }, + gold: { + light: [ + '#ffffff', + '#fffcff', + '#fff8f2', + '#fff4e2', + '#ffefd0', + '#ffe9bb', + '#ffe3a4', + '#ffdb8b', + '#ffd46d', + '#ffcb47', + '#ac8100', + '#593f00', + '#070300', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(255, 105, 255, 0.02)', + 'rgba(255, 138, 38, 0.06)', + 'rgba(255, 163, 13, 0.12)', + 'rgba(255, 171, 8, 0.19)', + 'rgba(255, 174, 3, 0.27)', + 'rgba(255, 177, 2, 0.36)', + 'rgba(255, 177, 3, 0.46)', + 'rgba(255, 181, 3, 0.58)', + 'rgba(255, 184, 3, 0.73)', + '#ac8100', + '#593f00', + '#070300', + ], + dark: [ + '#070300', + '#271a00', + '#3f2c00', + '#593f00', + '#745400', + '#906a00', + '#ac8100', + '#c99811', + '#e4b12f', + '#ffcb47', + '#ffdd90', + '#ffeecd', + '#ffffff', + ], + darkA: [ + 'rgba(233, 100, 0, 0.03)', + 'rgba(244, 163, 0, 0.16)', + 'rgba(252, 176, 0, 0.25)', + 'rgba(254, 180, 0, 0.35)', + 'rgba(252, 183, 0, 0.46)', + 'rgba(253, 186, 0, 0.57)', + 'rgba(253, 190, 0, 0.68)', + 'rgba(254, 192, 22, 0.79)', + 'rgba(253, 197, 52, 0.9)', + '#ffcb47', + '#ffdd90', + '#ffeecd', + '#ffffff', + ], + }, + yellow: { + light: [ + '#ffffff', + '#fffeff', + '#fffcff', + '#fffbf1', + '#fffada', + '#fff9c2', + '#fff7aa', + '#fff592', + '#fff279', + '#ffef5c', + '#ab9800', + '#584a00', + '#050400', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(255, 155, 255, 0.01)', + 'rgba(255, 105, 255, 0.02)', + 'rgba(255, 188, 22, 0.06)', + 'rgba(255, 222, 8, 0.15)', + 'rgba(255, 230, 1, 0.24)', + 'rgba(255, 231, 5, 0.34)', + 'rgba(255, 232, 2, 0.43)', + 'rgba(255, 230, 2, 0.53)', + 'rgba(255, 230, 0, 0.64)', + '#ab9800', + '#584a00', + '#050400', + ], + dark: [ + '#050400', + '#251d00', + '#3e3300', + '#584a00', + '#736300', + '#8e7d00', + '#ab9800', + '#c7b426', + '#e3d142', + '#ffef5c', + '#fff594', + '#fffad3', + '#ffffff', + ], + darkA: [ + 'rgba(250, 200, 0, 0.02)', + 'rgba(247, 193, 0, 0.15)', + 'rgba(248, 204, 0, 0.25)', + 'rgba(251, 211, 0, 0.35)', + 'rgba(250, 215, 0, 0.46)', + 'rgba(254, 223, 0, 0.56)', + 'rgba(255, 227, 0, 0.67)', + 'rgba(255, 231, 49, 0.78)', + 'rgba(255, 235, 74, 0.89)', + '#ffef5c', + '#fff594', + '#fffad3', + '#ffffff', + ], + }, + lime: { + light: [ + '#ffffff', + '#feffeb', + '#f9ffd8', + '#f2ffc1', + '#ebfdaf', + '#e4fc9b', + '#ddf987', + '#d5f773', + '#cdf35c', + '#c4f042', + '#769d00', + '#374f00', + '#020400', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(242, 255, 5, 0.08)', + 'rgba(218, 255, 11, 0.16)', + 'rgba(203, 255, 7, 0.25)', + 'rgba(193, 249, 5, 0.32)', + 'rgba(187, 247, 5, 0.4)', + 'rgba(183, 242, 0, 0.47)', + 'rgba(179, 240, 0, 0.55)', + 'rgba(177, 236, 0, 0.64)', + 'rgba(175, 235, 0, 0.74)', + '#769d00', + '#374f00', + '#020400', + ], + dark: [ + '#020400', + '#142100', + '#253700', + '#374f00', + '#4b6800', + '#608200', + '#769d00', + '#8fb81b', + '#a9d42f', + '#c4f042', + '#daf685', + '#eefbbe', + '#ffffff', + ], + darkA: [ + 'rgba(100, 200, 0, 0.02)', + 'rgba(154, 254, 0, 0.13)', + 'rgba(168, 250, 0, 0.22)', + 'rgba(177, 255, 0, 0.31)', + 'rgba(183, 254, 0, 0.41)', + 'rgba(188, 255, 0, 0.51)', + 'rgba(190, 253, 0, 0.62)', + 'rgba(196, 252, 37, 0.73)', + 'rgba(204, 255, 57, 0.83)', + 'rgba(209, 255, 70, 0.94)', + 'rgba(225, 254, 137, 0.97)', + 'rgba(240, 254, 192, 0.99)', + '#ffffff', + ], + }, + green: { + light: [ + '#ffffff', + '#f4fdeb', + '#e7f8dd', + '#d8f2ce', + '#c7eabd', + '#b4e1ac', + '#a0d79b', + '#89cc8a', + '#71c179', + '#55b467', + '#007944', + '#003f28', + '#000503', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(117, 230, 5, 0.08)', + 'rgba(84, 205, 12, 0.14)', + 'rgba(60, 190, 10, 0.2)', + 'rgba(40, 174, 1, 0.26)', + 'rgba(28, 164, 3, 0.33)', + 'rgba(18, 155, 5, 0.4)', + 'rgba(4, 146, 6, 0.47)', + 'rgba(1, 144, 16, 0.56)', + 'rgba(1, 143, 28, 0.67)', + '#007944', + '#003f28', + '#000503', + ], + dark: [ + '#000503', + '#001d12', + '#002d1d', + '#003f28', + '#005232', + '#00653c', + '#007944', + '#1b8d4d', + '#3ba05a', + '#55b467', + '#96cd92', + '#cde6c3', + '#ffffff', + ], + darkA: [ + 'rgba(0, 250, 150, 0.02)', + 'rgba(0, 242, 150, 0.12)', + 'rgba(0, 250, 161, 0.18)', + 'rgba(0, 252, 160, 0.25)', + 'rgba(0, 248, 152, 0.33)', + 'rgba(0, 252, 150, 0.4)', + 'rgba(0, 252, 142, 0.48)', + 'rgba(48, 252, 137, 0.56)', + 'rgba(94, 254, 143, 0.63)', + 'rgba(120, 254, 145, 0.71)', + 'rgba(185, 253, 180, 0.81)', + 'rgba(225, 253, 214, 0.91)', + '#ffffff', + ], + }, + cyan: { + light: [ + '#ffffff', + '#f9fffb', + '#effff8', + '#e3fff4', + '#d8fef0', + '#ccfcec', + '#c0fae8', + '#b3f8e3', + '#a5f6de', + '#95f3d9', + '#2fa28a', + '#005245', + '#000503', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(55, 255, 122, 0.03)', + 'rgba(26, 255, 155, 0.07)', + 'rgba(0, 255, 155, 0.11)', + 'rgba(11, 249, 161, 0.16)', + 'rgba(0, 240, 160, 0.2)', + 'rgba(3, 235, 163, 0.25)', + 'rgba(2, 232, 162, 0.3)', + 'rgba(5, 230, 163, 0.36)', + 'rgba(3, 226, 165, 0.42)', + 'rgba(1, 142, 112, 0.82)', + '#005245', + '#000503', + ], + dark: [ + '#000503', + '#00221c', + '#003930', + '#005245', + '#006c5b', + '#008772', + '#2fa28a', + '#55bca4', + '#75d7be', + '#95f3d9', + '#bdf7e4', + '#dffcf0', + '#ffffff', + ], + darkA: [ + 'rgba(0, 250, 150, 0.02)', + 'rgba(0, 243, 200, 0.14)', + 'rgba(0, 248, 209, 0.23)', + 'rgba(0, 248, 209, 0.33)', + 'rgba(0, 251, 212, 0.43)', + 'rgba(0, 255, 215, 0.53)', + 'rgba(73, 253, 216, 0.64)', + 'rgba(115, 254, 222, 0.74)', + 'rgba(138, 253, 224, 0.85)', + 'rgba(155, 253, 226, 0.96)', + 'rgba(195, 255, 235, 0.97)', + 'rgba(225, 255, 242, 0.99)', + '#ffffff', + ], + }, + blue: { + light: [ + '#ffffff', + '#fbfeff', + '#f4fcff', + '#eafaff', + '#dff7ff', + '#d3f5ff', + '#c4f2ff', + '#b4efff', + '#a1ecff', + '#8ae8ff', + '#159ab0', + '#004e59', + '#000506', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(55, 205, 255, 0.02)', + 'rgba(35, 195, 255, 0.05)', + 'rgba(22, 199, 255, 0.09)', + 'rgba(9, 193, 255, 0.13)', + 'rgba(11, 199, 255, 0.18)', + 'rgba(9, 201, 255, 0.24)', + 'rgba(5, 202, 255, 0.3)', + 'rgba(1, 204, 255, 0.37)', + 'rgba(1, 205, 255, 0.46)', + 'rgba(1, 145, 169, 0.92)', + '#004e59', + '#000506', + ], + dark: [ + '#000506', + '#002126', + '#00363f', + '#004e59', + '#006675', + '#008093', + '#159ab0', + '#47b3ca', + '#6acde4', + '#8ae8ff', + '#b8f0ff', + '#def7ff', + '#ffffff', + ], + darkA: [ + 'rgba(0, 167, 200, 0.03)', + 'rgba(0, 220, 253, 0.15)', + 'rgba(0, 216, 252, 0.25)', + 'rgba(0, 223, 254, 0.35)', + 'rgba(0, 222, 254, 0.46)', + 'rgba(0, 221, 253, 0.58)', + 'rgba(30, 223, 255, 0.69)', + 'rgba(89, 224, 252, 0.8)', + 'rgba(118, 228, 253, 0.9)', + '#8ae8ff', + '#b8f0ff', + '#def7ff', + '#ffffff', + ], + }, + geekblue: { + light: [ + '#ffffff', + '#f8faff', + '#eaf3ff', + '#daeaff', + '#c7e0ff', + '#b1d5ff', + '#9ac9ff', + '#7fbcff', + '#60aeff', + '#369eff', + '#0264c1', + '#003176', + '#000216', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(22, 88, 255, 0.03)', + 'rgba(22, 122, 255, 0.09)', + 'rgba(8, 115, 255, 0.15)', + 'rgba(0, 114, 255, 0.22)', + 'rgba(3, 120, 255, 0.31)', + 'rgba(3, 120, 255, 0.4)', + 'rgba(4, 124, 255, 0.51)', + 'rgba(3, 126, 255, 0.63)', + 'rgba(1, 132, 255, 0.79)', + '#0264c1', + '#003176', + '#000216', + ], + dark: [ + '#000216', + '#001343', + '#00225c', + '#003176', + '#00418f', + '#0052a8', + '#0264c1', + '#1877d5', + '#288aea', + '#369eff', + '#88bffb', + '#c5dffd', + '#ffffff', + ], + darkA: [ + 'rgba(0, 22, 244, 0.09)', + 'rgba(0, 70, 248, 0.27)', + 'rgba(0, 92, 249, 0.37)', + 'rgba(0, 104, 251, 0.47)', + 'rgba(0, 116, 255, 0.56)', + 'rgba(0, 124, 255, 0.66)', + 'rgba(3, 132, 254, 0.76)', + 'rgba(29, 142, 254, 0.84)', + 'rgba(43, 150, 254, 0.92)', + '#369eff', + 'rgba(137, 193, 254, 0.99)', + '#c5dffd', + '#ffffff', + ], + }, + purple: { + light: [ + '#ffffff', + '#fff6fb', + '#ffe7fd', + '#fdd6fe', + '#f6c4f8', + '#eeb1f1', + '#e49ce8', + '#d886de', + '#cb6ed2', + '#bd54c6', + '#892b8a', + '#560053', + '#0d000b', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(255, 30, 155, 0.04)', + 'rgba(255, 15, 235, 0.1)', + 'rgba(243, 14, 249, 0.17)', + 'rgba(218, 9, 226, 0.24)', + 'rgba(200, 3, 210, 0.31)', + 'rgba(186, 1, 196, 0.39)', + 'rgba(174, 3, 186, 0.48)', + 'rgba(164, 1, 176, 0.57)', + 'rgba(156, 0, 170, 0.67)', + 'rgba(113, 0, 114, 0.83)', + '#560053', + '#0d000b', + ], + dark: [ + '#0d000b', + '#2e002a', + '#42003e', + '#560053', + '#670e66', + '#781e78', + '#892b8a', + '#9a399e', + '#ab46b2', + '#bd54c6', + '#d590da', + '#edc7ee', + '#ffffff', + ], + darkA: [ + 'rgba(217, 0, 183, 0.06)', + 'rgba(242, 0, 221, 0.19)', + 'rgba(254, 0, 238, 0.26)', + 'rgba(253, 0, 244, 0.34)', + 'rgba(251, 34, 249, 0.41)', + 'rgba(255, 64, 255, 0.47)', + 'rgba(249, 78, 251, 0.55)', + 'rgba(248, 92, 255, 0.62)', + 'rgba(244, 100, 254, 0.7)', + 'rgba(242, 108, 254, 0.78)', + 'rgba(248, 167, 253, 0.86)', + 'rgba(252, 212, 253, 0.94)', + '#ffffff', + ], + }, + magenta: { + light: [ + '#ffffff', + '#fff7f9', + '#ffeaf4', + '#ffdaee', + '#ffc7e7', + '#ffb2df', + '#ff99d6', + '#f980ca', + '#ef67ba', + '#e34ba9', + '#a32466', + '#63002d', + '#100002', + ], + lightA: [ + 'rgba(255, 255, 255, 0.01)', + 'rgba(255, 55, 105, 0.04)', + 'rgba(255, 22, 133, 0.09)', + 'rgba(255, 8, 142, 0.15)', + 'rgba(255, 0, 146, 0.22)', + 'rgba(255, 7, 152, 0.31)', + 'rgba(255, 0, 153, 0.4)', + 'rgba(243, 1, 149, 0.5)', + 'rgba(228, 2, 140, 0.6)', + 'rgba(216, 1, 134, 0.71)', + 'rgba(148, 0, 77, 0.86)', + '#63002d', + '#100002', + ], + dark: [ + '#100002', + '#350011', + '#4b001e', + '#63002d', + '#79093f', + '#8e1752', + '#a32466', + '#b8317b', + '#ce3e91', + '#e34ba9', + '#f38bcb', + '#fec5e8', + '#ffffff', + ], + darkA: [ + 'rgba(229, 0, 29, 0.07)', + 'rgba(252, 0, 81, 0.21)', + 'rgba(250, 0, 100, 0.3)', + 'rgba(254, 0, 115, 0.39)', + 'rgba(252, 19, 131, 0.48)', + 'rgba(254, 41, 146, 0.56)', + 'rgba(255, 56, 159, 0.64)', + 'rgba(252, 67, 168, 0.73)', + 'rgba(254, 77, 179, 0.81)', + 'rgba(255, 84, 190, 0.89)', + 'rgba(253, 145, 211, 0.96)', + '#fec5e8', + '#ffffff', + ], + }, + gray: { + light: [ + '#ffffff', + '#f8f8f8', + '#eeeeee', + '#e3e3e3', + '#dddddd', + '#cccccc', + '#bbbbbb', + '#aaaaaa', + '#999999', + '#888888', + '#666666', + '#333333', + '#080808', + ], + lightA: [ + 'rgba(0, 0, 0, 0.015)', + 'rgba(0, 0, 0, 0.03)', + 'rgba(0, 0, 0, 0.06)', + 'rgba(0, 0, 0, 0.12)', + 'rgba(0, 0, 0, 0.18)', + 'rgba(0, 0, 0, 0.24)', + 'rgba(0, 0, 0, 0.32)', + 'rgba(0, 0, 0, 0.38)', + 'rgba(0, 0, 0, 0.44)', + 'rgba(0, 0, 0, 0.5)', + 'rgba(0, 0, 0, 0.68)', + 'rgba(0, 0, 0, 0.84)', + 'rgba(0, 0, 0, 0.98)', + ], + dark: [ + '#000000', + '#111111', + '#222222', + '#2d2d2d', + '#333333', + '#444444', + '#555555', + '#666666', + '#6f6f6f', + '#777777', + '#aaaaaa', + '#dddddd', + '#ffffff', + ], + darkA: [ + 'rgba(255, 255, 255, 0.02)', + 'rgba(255, 255, 255, 0.06)', + 'rgba(255, 255, 255, 0.10)', + 'rgba(255, 255, 255, 0.16)', + 'rgba(255, 255, 255, 0.24)', + 'rgba(255, 255, 255, 0.28)', + 'rgba(255, 255, 255, 0.32)', + 'rgba(255, 255, 255, 0.38)', + 'rgba(255, 255, 255, 0.44)', + 'rgba(255, 255, 255, 0.5)', + 'rgba(255, 255, 255, 0.66)', + 'rgba(255, 255, 255, 0.84)', + '#ffffff', + ], + }, + bnw: { + light: [ + '#ffffff', + '#f5f5f5', + '#eeeeee', + '#cccccc', + '#aaaaaa', + '#888888', + '#666666', + '#444444', + '#333333', + '#222222', + '#111111', + '#111111', + '#111111', + ], + lightA: [ + 'rgba(0, 0, 0, 0.02)', + 'rgba(0, 0, 0, 0.08)', + 'rgba(0, 0, 0, 0.16)', + 'rgba(0, 0, 0, 0.22)', + 'rgba(0, 0, 0, 0.36)', + 'rgba(0, 0, 0, 0.48)', + 'rgba(0, 0, 0, 0.6)', + 'rgba(0, 0, 0, 0.72)', + 'rgba(0, 0, 0, 0.84)', + 'rgba(0, 0, 0, 0.88)', + 'rgba(0, 0, 0, 0.92)', + 'rgba(0, 0, 0, 0.96)', + 'rgba(0, 0, 0, 0.98)', + ], + dark: [ + '#000000', + '#111111', + '#333333', + '#555555', + '#666666', + '#888888', + '#aaaaaa', + '#cccccc', + '#dddddd', + '#eeeeee', + '#ffffff', + '#ffffff', + '#ffffff', + ], + darkA: [ + 'rgba(255, 255, 255, 0.02)', + 'rgba(255, 255, 255, 0.08)', + 'rgba(255, 255, 255, 0.16)', + 'rgba(255, 255, 255, 0.22)', + 'rgba(255, 255, 255, 0.36)', + 'rgba(255, 255, 255, 0.48)', + 'rgba(255, 255, 255, 0.6)', + 'rgba(255, 255, 255, 0.72)', + 'rgba(255, 255, 255, 0.84)', + 'rgba(255, 255, 255, 0.88)', + 'rgba(255, 255, 255, 0.92)', + 'rgba(255, 255, 255, 0.96)', + 'rgba(255, 255, 255, 0.98)', + ], + }, +}; + +export const getThemeColor = (isDarkMode: boolean) => { + const type = isDarkMode ? 'dark' : 'light'; + const colorText = colorScales.gray[type][11]; + const colorTextSecondary = isDarkMode ? colorScales.gray[type][9] : colorScales.gray[type][10]; + const colorTextTertiary = isDarkMode ? colorScales.gray[type][6] : colorScales.gray[type][7]; + const colorFillTertiary = isDarkMode ? '#2b303b' : '#fafafa'; + const colorRed = isDarkMode ? colorScales.red[type][9] : colorScales.volcano[type][9]; + const colorOrange = isDarkMode ? colorScales.gold[type][9] : colorScales.orange[type][9]; + const colorGreen = isDarkMode ? colorScales.lime[type][9] : colorScales.green[type][9]; + const colorBlue = isDarkMode ? colorScales.blue[type][9] : colorScales.geekblue[type][9]; + return { + type, + colorText, + colorTextSecondary, + colorTextTertiary, + colorRed, + colorOrange, + colorGreen, + colorBlue, + colorFillTertiary, + }; +}; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/config.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/config.ts new file mode 100644 index 00000000..3c1e7c45 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/config.ts @@ -0,0 +1,1964 @@ +import { getThemeColor } from './colors'; + +export const themeConfig: any = (isDarkMode: boolean) => { + const { type, colorBlue, colorGreen, colorOrange, colorRed, colorText, colorTextSecondary, colorTextTertiary } = + getThemeColor(isDarkMode); + + return { + name: type, + type, + semanticHighlighting: true, + semanticTokenColors: { + enumMember: { + foreground: colorBlue, + }, + 'variable.constant': { + foreground: colorGreen, + }, + 'variable.defaultLibrary': { + foreground: colorRed, + }, + 'variable:dart': { + foreground: colorGreen, + }, + 'property:dart': { + foreground: colorGreen, + }, + 'annotation:dart': { + foreground: colorGreen, + }, + 'parameter.label:dart': { + foreground: colorTextTertiary, + }, + macro: { + foreground: colorGreen, + }, + tomlArrayKey: { + foreground: colorRed, + }, + }, + tokenColors: [ + { + scope: 'meta.embedded', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'unison punctuation', + scope: + 'punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison', + settings: { + foreground: colorText, + }, + }, + { + name: 'haskell variable generic-type', + scope: 'variable.other.generic-type.haskell', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'haskell storage type', + scope: 'storage.type.haskell', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'support.variable.magic.python', + scope: 'support.variable.magic.python', + settings: { + foreground: colorText, + }, + }, + { + name: 'punctuation.separator.parameters.python', + scope: + 'punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'variable.parameter.function.language.special.self.python', + scope: 'variable.parameter.function.language.special.self.python', + settings: { + foreground: colorRed, + }, + }, + { + name: 'variable.parameter.function.language.special.cls.python', + scope: 'variable.parameter.function.language.special.cls.python', + settings: { + foreground: colorRed, + }, + }, + { + name: 'storage.modifier.lifetime.rust', + scope: 'storage.modifier.lifetime.rust', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'support.function.std.rust', + scope: 'support.function.std.rust', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'entity.name.lifetime.rust', + scope: 'entity.name.lifetime.rust', + settings: { + foreground: colorRed, + }, + }, + { + name: 'variable.language.rust', + scope: 'variable.language.rust', + settings: { + foreground: colorText, + }, + }, + { + name: 'support.constant.edge', + scope: 'support.constant.edge', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'regexp constant character-class', + scope: 'constant.other.character-class.regexp', + settings: { + foreground: colorText, + }, + }, + { + name: 'keyword.operator', + scope: ['keyword.operator.word'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'regexp operator.quantifier', + scope: 'keyword.operator.quantifier.regexp', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Text', + scope: 'variable.parameter.function', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Comment Markup Link', + scope: 'comment markup.link', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'markup diff', + scope: 'markup.changed.diff', + settings: { + foreground: colorRed, + }, + }, + { + name: 'diff', + scope: + 'meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'inserted.diff', + scope: 'markup.inserted.diff', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'deleted.diff', + scope: 'markup.deleted.diff', + settings: { + foreground: colorText, + }, + }, + { + name: 'c++ function', + scope: 'meta.function.c,meta.function.cpp', + settings: { + foreground: colorText, + }, + }, + { + name: 'c++ block', + scope: + 'punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'js/ts punctuation separator key-value', + scope: 'punctuation.separator.key-value', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'js/ts import keyword', + scope: 'keyword.operator.expression.import', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'math js/ts', + scope: 'support.constant.math', + settings: { + foreground: colorRed, + }, + }, + { + name: 'math property js/ts', + scope: 'support.constant.property.math', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'js/ts variable.other.constant', + scope: 'variable.other.constant', + settings: { + foreground: colorRed, + }, + }, + { + name: 'java type', + scope: ['storage.type.annotation.java', 'storage.type.object.array.java'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'java source', + scope: 'source.java', + settings: { + foreground: colorText, + }, + }, + { + name: 'java modifier.import', + scope: + 'punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'java modifier.import', + scope: 'meta.method.java', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'java modifier.import', + scope: 'storage.modifier.import.java,storage.type.java,storage.type.generic.java', + settings: { + foreground: colorRed, + }, + }, + { + name: 'java instanceof', + scope: 'keyword.operator.instanceof.java', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'java variable.name', + scope: 'meta.definition.variable.name.java', + settings: { + foreground: colorText, + }, + }, + { + name: 'operator logical', + scope: 'keyword.operator.logical', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'operator bitwise', + scope: 'keyword.operator.bitwise', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'operator channel', + scope: 'keyword.operator.channel', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'support.constant.property-value.scss', + scope: 'support.constant.property-value.scss,support.constant.property-value.css', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'CSS/SCSS/LESS Operators', + scope: 'keyword.operator.css,keyword.operator.scss,keyword.operator.less', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'css color standard name', + scope: 'support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'css comma', + scope: 'punctuation.separator.list.comma.css', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'css attribute-name.id', + scope: 'support.constant.color.w3c-standard-color-name.css', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'css property-name', + scope: 'support.type.vendored.property-name.css', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'js/ts module', + scope: 'support.module.node,support.type.object.module,support.module.node', + settings: { + foreground: colorRed, + }, + }, + { + name: 'entity.name.type.module', + scope: 'entity.name.type.module', + settings: { + foreground: colorRed, + }, + }, + { + name: 'js variable readwrite', + scope: + 'variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node', + settings: { + foreground: colorText, + }, + }, + { + name: 'js/ts json', + scope: 'support.constant.json', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'js/ts Keyword', + scope: [ + 'keyword.operator.expression.instanceof', + 'keyword.operator.new', + 'keyword.operator.ternary', + 'keyword.operator.optional', + 'keyword.operator.expression.keyof', + ], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'js/ts console', + scope: 'support.type.object.console', + settings: { + foreground: colorText, + }, + }, + { + name: 'js/ts support.variable.property.process', + scope: 'support.variable.property.process', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'js console function', + scope: 'entity.name.function,support.function.console', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'keyword.operator.misc.rust', + scope: 'keyword.operator.misc.rust', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'keyword.operator.sigil.rust', + scope: 'keyword.operator.sigil.rust', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'operator', + scope: 'keyword.operator.delete', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'js dom', + scope: 'support.type.object.dom', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'js dom variable', + scope: 'support.variable.dom,support.variable.property.dom', + settings: { + foreground: colorText, + }, + }, + { + name: 'keyword.operator', + scope: + 'keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'C operator assignment', + scope: + 'keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Punctuation', + scope: 'punctuation.separator.delimiter', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Other punctuation .c', + scope: 'punctuation.separator.c,punctuation.separator.cpp', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'C type posix-reserved', + scope: 'support.type.posix-reserved.c,support.type.posix-reserved.cpp', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'keyword.operator.sizeof.c', + scope: 'keyword.operator.sizeof.c,keyword.operator.sizeof.cpp', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'python parameter', + scope: 'variable.parameter.function.language.python', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'python type', + scope: 'support.type.python', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'python logical', + scope: 'keyword.operator.logical.python', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'pyCs', + scope: 'variable.parameter.function.python', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'python block', + scope: + 'punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'python function-call.generic', + scope: 'meta.function-call.generic.python', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'python placeholder reset to normal string', + scope: 'constant.character.format.placeholder.other.python', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Operators', + scope: 'keyword.operator', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Compound Assignment Operators', + scope: 'keyword.operator.assignment.compound', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Compound Assignment Operators js/ts', + scope: 'keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Keywords', + scope: 'keyword', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Namespaces', + scope: 'entity.name.namespace', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Variables', + scope: 'variable', + settings: { + foreground: colorText, + }, + }, + { + name: 'Variables', + scope: 'variable.c', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Language variables', + scope: 'variable.language', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Java Variables', + scope: 'token.variable.parameter.java', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Java Imports', + scope: 'import.storage.java', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Packages', + scope: 'token.package.keyword', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Packages', + scope: 'token.package', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Functions', + scope: ['entity.name.function', 'meta.require', 'support.function.any-method', 'variable.function'], + settings: { + foreground: colorOrange, + }, + }, + { + name: 'Classes', + scope: 'entity.name.type.namespace', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Classes', + scope: 'support.class, entity.name.type.class', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Class name', + scope: 'entity.name.class.identifier.namespace.type', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Class name', + scope: ['entity.name.class', 'variable.other.class.js', 'variable.other.class.ts'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'Class name php', + scope: 'variable.other.class.php', + settings: { + foreground: colorText, + }, + }, + { + name: 'Type Name', + scope: 'entity.name.type', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Keyword Control', + scope: 'keyword.control', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Control Elements', + scope: 'control.elements, keyword.operator.less', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Methods', + scope: 'keyword.other.special-method', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'Storage', + scope: 'storage', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Storage JS TS', + scope: 'token.storage', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void', + scope: + 'keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Java Storage', + scope: 'token.storage.type.java', + settings: { + foreground: colorRed, + }, + }, + { + name: 'Support', + scope: 'support.function', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Support type', + scope: 'support.type.property-name', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: '[VSCODE-CUSTOM] toml support', + scope: + 'support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml', + settings: { + foreground: colorText, + }, + }, + { + name: 'Support type', + scope: 'support.constant.property-value', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Support type', + scope: 'support.constant.font-name', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Meta tag', + scope: 'meta.tag', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Strings', + scope: 'string', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Constant other symbol', + scope: 'constant.other.symbol', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Integers', + scope: 'constant.numeric', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Constants', + scope: 'constant', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Constants', + scope: 'punctuation.definition.constant', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Tags', + scope: 'entity.name.tag', + settings: { + foreground: colorText, + }, + }, + { + name: 'Attributes', + scope: 'entity.other.attribute-name', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Attribute IDs', + scope: 'entity.other.attribute-name.id', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'Attribute class', + scope: 'entity.other.attribute-name.class.css', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Selector', + scope: 'meta.selector', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Headings', + scope: 'markup.heading', + settings: { + foreground: colorText, + }, + }, + { + name: 'Headings', + scope: 'markup.heading punctuation.definition.heading, entity.name.section', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'Units', + scope: 'keyword.other.unit', + settings: { + foreground: colorText, + }, + }, + { + name: 'Bold', + scope: 'markup.bold,todo.bold', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Bold', + scope: 'punctuation.definition.bold', + settings: { + foreground: colorRed, + }, + }, + { + name: 'markup Italic', + scope: 'markup.italic, punctuation.definition.italic,todo.emphasis', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'emphasis md', + scope: 'emphasis md', + settings: { + foreground: colorBlue, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown headings', + scope: 'entity.name.section.markdown', + settings: { + foreground: colorText, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown heading Punctuation Definition', + scope: 'punctuation.definition.heading.markdown', + settings: { + foreground: colorText, + }, + }, + { + name: 'punctuation.definition.list.begin.markdown', + scope: 'punctuation.definition.list.begin.markdown', + settings: { + foreground: colorRed, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown heading setext', + scope: 'markup.heading.setext', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Punctuation Definition Bold', + scope: 'punctuation.definition.bold.markdown', + settings: { + foreground: colorGreen, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Inline Raw', + scope: 'markup.inline.raw.markdown', + settings: { + foreground: colorGreen, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Inline Raw', + scope: 'markup.inline.raw.string.markdown', + settings: { + foreground: colorGreen, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Inline Raw punctuation', + scope: 'punctuation.definition.raw.markdown', + settings: { + foreground: colorRed, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown List Punctuation Definition', + scope: 'punctuation.definition.list.markdown', + settings: { + foreground: colorRed, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Punctuation Definition String', + scope: [ + 'punctuation.definition.string.begin.markdown', + 'punctuation.definition.string.end.markdown', + 'punctuation.definition.metadata.markdown', + ], + settings: { + foreground: colorText, + }, + }, + { + name: 'beginning.punctuation.definition.list.markdown', + scope: ['beginning.punctuation.definition.list.markdown'], + settings: { + foreground: colorText, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Punctuation Definition Link', + scope: 'punctuation.definition.metadata.markdown', + settings: { + foreground: colorText, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Underline Link/Image', + scope: 'markup.underline.link.markdown,markup.underline.link.image.markdown', + settings: { + foreground: colorBlue, + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Link Title/Description', + scope: 'string.other.link.title.markdown,string.other.link.description.markdown', + settings: { + foreground: colorOrange, + }, + }, + { + name: '[VSCODE-CUSTOM] Asciidoc Inline Raw', + scope: 'markup.raw.monospace.asciidoc', + settings: { + foreground: colorGreen, + }, + }, + { + name: '[VSCODE-CUSTOM] Asciidoc Inline Raw Punctuation Definition', + scope: 'punctuation.definition.asciidoc', + settings: { + foreground: colorRed, + }, + }, + { + name: '[VSCODE-CUSTOM] Asciidoc List Punctuation Definition', + scope: 'markup.list.asciidoc', + settings: { + foreground: colorRed, + }, + }, + { + name: '[VSCODE-CUSTOM] Asciidoc underline link', + scope: 'markup.link.asciidoc,markup.other.url.asciidoc', + settings: { + foreground: colorBlue, + }, + }, + { + name: '[VSCODE-CUSTOM] Asciidoc link name', + scope: 'string.unquoted.asciidoc,markup.other.url.asciidoc', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'Regular Expressions', + scope: 'string.regexp', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Embedded', + scope: 'punctuation.section.embedded, variable.interpolation', + settings: { + foreground: colorText, + }, + }, + { + name: 'Embedded', + scope: 'punctuation.section.embedded.begin,punctuation.section.embedded.end', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'illegal', + scope: 'invalid.illegal', + settings: { + foreground: colorText, + }, + }, + { + name: 'illegal', + scope: 'invalid.illegal.bad-ampersand.html', + settings: { + foreground: colorTextTertiary, + }, + }, + { + scope: 'invalid.illegal.unrecognized-tag.html', + settings: { + foreground: colorText, + }, + }, + { + name: 'Broken', + scope: 'invalid.broken', + settings: { + foreground: colorText, + }, + }, + { + name: 'Deprecated', + scope: 'invalid.deprecated', + settings: { + foreground: colorText, + }, + }, + { + name: 'html Deprecated', + scope: 'invalid.deprecated.entity.other.attribute-name.html', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Unimplemented', + scope: 'invalid.unimplemented', + settings: { + foreground: colorText, + }, + }, + { + name: 'Source Json Meta Structure Dictionary Json > String Quoted Json', + scope: 'source.json meta.structure.dictionary.json > string.quoted.json', + settings: { + foreground: colorText, + }, + }, + { + name: 'Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String', + scope: 'source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string', + settings: { + foreground: colorText, + }, + }, + { + name: 'Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation', + scope: + 'source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json', + scope: + 'source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json', + settings: { + foreground: colorBlue, + }, + }, + { + name: '[VSCODE-CUSTOM] JSON Property Name', + scope: 'support.type.property-name.json', + settings: { + foreground: colorText, + }, + }, + { + name: '[VSCODE-CUSTOM] JSON Punctuation for Property Name', + scope: 'support.type.property-name.json punctuation', + settings: { + foreground: colorText, + }, + }, + { + name: 'laravel blade tag', + scope: 'text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'laravel blade @', + scope: 'text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'use statement for other classes', + scope: + 'support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php', + settings: { + foreground: colorRed, + }, + }, + { + name: 'error suppression', + scope: 'keyword.operator.error-control.php', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'php instanceof', + scope: 'keyword.operator.type.php', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'style double quoted array index normal begin', + scope: 'punctuation.section.array.begin.php', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'style double quoted array index normal end', + scope: 'punctuation.section.array.end.php', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'php illegal.non-null-typehinted', + scope: 'invalid.illegal.non-null-typehinted.php', + settings: { + foreground: colorRed, + }, + }, + { + name: 'php types', + scope: 'storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php', + settings: { + foreground: colorRed, + }, + }, + { + name: 'php call-function', + scope: 'meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'php function-resets', + scope: + 'punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'support php constants', + scope: 'support.constant.core.rust', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'support php constants', + scope: + 'support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'php goto', + scope: 'entity.name.goto-label.php,support.other.php', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'php logical/bitwise operator', + scope: 'keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'php regexp operator', + scope: 'keyword.operator.regexp.php', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'php comparison', + scope: 'keyword.operator.comparison.php', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'php heredoc/nowdoc', + scope: 'keyword.operator.heredoc.php,keyword.operator.nowdoc.php', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'python function decorator @', + scope: 'meta.function.decorator.python', + settings: { + foreground: colorOrange, + }, + }, + { + name: 'python function support', + scope: 'support.token.decorator.python,meta.function.decorator.identifier.python', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'parameter function js/ts', + scope: 'function.parameter', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'brace function', + scope: 'function.brace', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'parameter function ruby cs', + scope: 'function.parameter.ruby, function.parameter.cs', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'constant.language.symbol.ruby', + scope: 'constant.language.symbol.ruby', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'constant.language.symbol.hashkey.ruby', + scope: 'constant.language.symbol.hashkey.ruby', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'rgb-value', + scope: 'rgb-value', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'rgb value', + scope: 'inline-color-decoration rgb-value', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'rgb value less', + scope: 'less rgb-value', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'sass selector', + scope: 'selector.sass', + settings: { + foreground: colorText, + }, + }, + { + name: 'ts primitive/builtin types', + scope: 'support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx', + settings: { + foreground: colorRed, + }, + }, + { + name: 'block scope', + scope: 'block.scope.end,block.scope.begin', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'cs storage type', + scope: 'storage.type.cs', + settings: { + foreground: colorRed, + }, + }, + { + name: 'cs local variable', + scope: 'entity.name.variable.local.cs', + settings: { + foreground: colorText, + }, + }, + { + scope: 'token.info-token', + settings: { + foreground: colorOrange, + }, + }, + { + scope: 'token.warn-token', + settings: { + foreground: colorGreen, + }, + }, + { + scope: 'token.error-token', + settings: { + foreground: colorRed, + }, + }, + { + scope: 'token.debug-token', + settings: { + foreground: colorBlue, + }, + }, + { + name: 'String interpolation', + scope: [ + 'punctuation.definition.template-expression.begin', + 'punctuation.definition.template-expression.end', + 'punctuation.section.embedded', + ], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Reset JavaScript string interpolation expression', + scope: ['meta.template.expression'], + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Import module JS', + scope: ['keyword.operator.module'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'js Flowtype', + scope: ['support.type.type.flowtype'], + settings: { + foreground: colorOrange, + }, + }, + { + name: 'js Flow', + scope: ['support.type.primitive'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'js class prop', + scope: ['meta.property.object'], + settings: { + foreground: colorText, + }, + }, + { + name: 'js func parameter', + scope: ['variable.parameter.function.js'], + settings: { + foreground: colorText, + }, + }, + { + name: 'js template literals begin', + scope: ['keyword.other.template.begin'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'js template literals end', + scope: ['keyword.other.template.end'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'js template literals variable braces begin', + scope: ['keyword.other.substitution.begin'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'js template literals variable braces end', + scope: ['keyword.other.substitution.end'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'js operator.assignment', + scope: ['keyword.operator.assignment'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'go operator', + scope: ['keyword.operator.assignment.go'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'go operator', + scope: ['keyword.operator.arithmetic.go', 'keyword.operator.address.go'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Go package name', + scope: ['entity.name.package.go'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'elm prelude', + scope: ['support.type.prelude.elm'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'elm constant', + scope: ['support.constant.elm'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'template literal', + scope: ['punctuation.quasi.element'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'html/pug (jade) escaped characters and entities', + scope: ['constant.character.entity'], + settings: { + foreground: colorText, + }, + }, + { + name: 'styling css pseudo-elements/classes to be able to differentiate from classes which are the same colour', + scope: ['entity.other.attribute-name.pseudo-element', 'entity.other.attribute-name.pseudo-class'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'Clojure globals', + scope: ['entity.global.clojure'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'Clojure symbols', + scope: ['meta.symbol.clojure'], + settings: { + foreground: colorText, + }, + }, + { + name: 'Clojure constants', + scope: ['constant.keyword.clojure'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'CoffeeScript Function Argument', + scope: ['meta.arguments.coffee', 'variable.parameter.function.coffee'], + settings: { + foreground: colorText, + }, + }, + { + name: 'Ini Default Text', + scope: ['source.ini'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Makefile prerequisities', + scope: ['meta.scope.prerequisites.makefile'], + settings: { + foreground: colorText, + }, + }, + { + name: 'Makefile text colour', + scope: ['source.makefile'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'Groovy import names', + scope: ['storage.modifier.import.groovy'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'Groovy Methods', + scope: ['meta.method.groovy'], + settings: { + foreground: colorOrange, + }, + }, + { + name: 'Groovy Variables', + scope: ['meta.definition.variable.name.groovy'], + settings: { + foreground: colorText, + }, + }, + { + name: 'Groovy Inheritance', + scope: ['meta.definition.class.inherited.classes.groovy'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'HLSL Semantic', + scope: ['support.variable.semantic.hlsl'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'HLSL Types', + scope: [ + 'support.type.texture.hlsl', + 'support.type.sampler.hlsl', + 'support.type.object.hlsl', + 'support.type.object.rw.hlsl', + 'support.type.fx.hlsl', + 'support.type.object.hlsl', + ], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'SQL Variables', + scope: ['text.variable', 'text.bracketed'], + settings: { + foreground: colorText, + }, + }, + { + name: 'types', + scope: ['support.type.swift', 'support.type.vb.asp'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'heading 1, keyword', + scope: ['entity.name.function.xi'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'heading 2, callable', + scope: ['entity.name.class.xi'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'heading 3, property', + scope: ['constant.character.character-class.regexp.xi'], + settings: { + foreground: colorText, + }, + }, + { + name: 'heading 4, type, class, interface', + scope: ['constant.regexp.xi'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'heading 5, enums, preprocessor, constant, decorator', + scope: ['keyword.control.xi'], + settings: { + foreground: colorBlue, + }, + }, + { + name: 'heading 6, number', + scope: ['invalid.xi'], + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'string', + scope: ['beginning.punctuation.definition.quote.markdown.xi'], + settings: { + foreground: colorGreen, + }, + }, + { + name: 'comments', + scope: ['beginning.punctuation.definition.list.markdown.xi'], + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'link', + scope: ['constant.character.xi'], + settings: { + foreground: colorOrange, + }, + }, + { + name: 'accent', + scope: ['accent.xi'], + settings: { + foreground: colorOrange, + }, + }, + { + name: 'wikiword', + scope: ['wikiword.xi'], + settings: { + foreground: colorGreen, + }, + }, + { + name: "language operators like '+', '-' etc", + scope: ['constant.other.color.rgb-value.xi'], + settings: { + foreground: colorText, + }, + }, + { + name: 'elements to dim', + scope: ['punctuation.definition.tag.xi'], + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'C++/C#', + scope: [ + 'entity.name.label.cs', + 'entity.name.scope-resolution.function.call', + 'entity.name.scope-resolution.function.definition', + ], + settings: { + foreground: colorRed, + }, + }, + { + name: 'Markdown underscore-style headers', + scope: ['entity.name.label.cs', 'markup.heading.setext.1.markdown', 'markup.heading.setext.2.markdown'], + settings: { + foreground: colorText, + }, + }, + { + name: 'meta.brace.square', + scope: [' meta.brace.square'], + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Comments', + scope: 'comment, punctuation.definition.comment', + settings: { + foreground: colorTextTertiary, + fontStyle: 'italic', + }, + }, + { + name: '[VSCODE-CUSTOM] Markdown Quote', + scope: 'markup.quote.markdown', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'punctuation.definition.block.sequence.item.yaml', + scope: 'punctuation.definition.block.sequence.item.yaml', + settings: { + foreground: colorTextTertiary, + }, + }, + { + scope: ['constant.language.symbol.elixir', 'constant.language.symbol.double-quoted.elixir'], + settings: { + foreground: colorBlue, + }, + }, + { + scope: ['entity.name.variable.parameter.cs'], + settings: { + foreground: colorRed, + }, + }, + { + scope: ['entity.name.variable.field.cs'], + settings: { + foreground: colorText, + }, + }, + { + name: 'Deleted', + scope: 'markup.deleted', + settings: { + foreground: colorText, + }, + }, + { + name: 'Inserted', + scope: 'markup.inserted', + settings: { + foreground: colorGreen, + }, + }, + { + name: 'Underline', + scope: 'markup.underline', + settings: { + fontStyle: 'underline', + }, + }, + { + name: 'punctuation.section.embedded.begin.php', + scope: ['punctuation.section.embedded.begin.php', 'punctuation.section.embedded.end.php'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'support.other.namespace.php', + scope: ['support.other.namespace.php'], + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'variable.other.object', + scope: ['variable.other.object'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'variable.other.constant.property', + scope: ['variable.other.constant.property'], + settings: { + foreground: colorText, + }, + }, + { + name: 'entity.other.inherited-class', + scope: ['entity.other.inherited-class'], + settings: { + foreground: colorRed, + }, + }, + { + name: 'c variable readwrite', + scope: 'variable.other.readwrite.c', + settings: { + foreground: colorText, + }, + }, + { + name: 'php scope', + scope: 'entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php', + settings: { + foreground: colorTextTertiary, + }, + }, + { + name: 'Assembly', + scope: ['constant.numeric.decimal.asm.x86_64'], + settings: { + foreground: colorBlue, + }, + }, + { + scope: ['support.other.parenthesis.regexp'], + settings: { + foreground: colorGreen, + }, + }, + { + scope: ['constant.character.escape'], + settings: { + foreground: colorBlue, + }, + }, + { + scope: ['string.regexp'], + settings: { + foreground: colorText, + }, + }, + { + scope: ['log.info'], + settings: { + foreground: colorGreen, + }, + }, + { + scope: ['log.warning'], + settings: { + foreground: colorRed, + }, + }, + { + scope: ['log.error'], + settings: { + foreground: colorText, + }, + }, + { + name: 'js/ts italic', + scope: + 'entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super', + settings: { + fontStyle: 'italic', + }, + }, + { + name: 'comment', + scope: 'comment.line.double-slash,comment.block.documentation', + settings: { + fontStyle: 'italic', + }, + }, + { + name: 'Python Keyword Control', + scope: 'keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.python', + settings: { + fontStyle: 'italic', + }, + }, + { + name: 'markup.italic.markdown', + scope: 'markup.italic.markdown', + settings: { + fontStyle: 'italic', + }, + }, + ], + colors: { + 'editor.foreground': colorTextSecondary, + }, + }; +}; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/index.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/index.ts new file mode 100644 index 00000000..6d3c8bf1 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/index.ts @@ -0,0 +1,3 @@ +export * from './colors'; +export * from './config'; +export * from './type'; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/type.ts b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/type.ts new file mode 100644 index 00000000..0715f87b --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Highlight/theme/type.ts @@ -0,0 +1,7 @@ +export const THEME_DARK = 'dark'; +export const THEME_LIGHT = 'light'; +export const THEME_AUTO = 'auto'; + +const tuple = (...args: T) => args; +const ThemeTypes = tuple(THEME_DARK, THEME_LIGHT, THEME_AUTO); +export type ThemeType = (typeof ThemeTypes)[number]; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx new file mode 100644 index 00000000..616bb9c6 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx @@ -0,0 +1,62 @@ +import { Snippet } from '../Snippet'; +import { createStyles } from 'antd-style'; +import { memo } from 'react'; +import HighlightWrapper from './wrapper'; +import React from 'react'; +const useStyles = createStyles(({ css }) => ({ + container: css` + :not(:last-child) { + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + } + `, + highlight: css` + pre { + padding: 12px !important; + } + `, +})); + +const countLines = (str: string): number => { + const regex = /\n/g; + const matches = str.match(regex); + return matches ? matches.length : 1; +}; + +export const Code = memo((properties: any) => { + const { styles, cx } = useStyles(); + + if (!properties.children[0]) return null; + + const { children, className } = properties.children[0].props; + + if (!children) return null; + + const content = Array.isArray(children) ? (children[0] as string) : children; + const lang = className?.replace('language-', '') || 'txt'; + console.log(countLines(content)); + if (countLines(content) === 1 && content.length <= 60) { + return ( + + {content} + + ); + } + + return ( + + {content} + + ); +}); diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Markdown/index.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/index.tsx new file mode 100644 index 00000000..3d086bc4 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/index.tsx @@ -0,0 +1,71 @@ +import { Collapse, Divider, Typography } from 'antd'; +import { CSSProperties, memo } from 'react'; +import ReactMarkdown, { Components } from 'react-markdown'; +import rehypeKatex from 'rehype-katex'; +import remarkGfm from 'remark-gfm'; +import remarkMath from 'remark-math'; + +import { PluggableList } from 'react-markdown/lib/react-markdown'; +import { withProvider } from '@ant-design/pro-editor'; +import { Code } from './CodeBlock'; +import { useStyles } from './style'; +import React from 'react'; +export interface MarkdownProps { + children?: string; + /** + * @description ClassName + */ + className?: string; + onDoubleClick?: () => void; + style?: CSSProperties; + rehypePlugins?: PluggableList; + remarkPlugins?: PluggableList; + components?: Components; +} + +const MemoHr = memo((props) => ); +const MemoDetails = memo((props) => ); +const MemoImage = memo((props) => ); +const MemoAlink = memo((props) => ); + +const Markdown = memo( + ({ + children, + className, + style, + onDoubleClick, + rehypePlugins: outRehypePlugins, + remarkPlugins: outRemarkPlugins, + components: outComponents, + ...rest + }) => { + const { styles } = useStyles(); + const components: any = { + details: MemoDetails, + hr: MemoHr, + a: MemoAlink, + img: MemoImage, + pre: Code, + ...outComponents, + }; + + const rehypePlugins = [rehypeKatex, ...(outRehypePlugins || [])]; + const remarkPlugins = [[remarkGfm, { singleTilde: false }], remarkMath, ...(outRemarkPlugins || [])]; + + return ( + + + {typeof children === 'string' ? children : ''} + + + ); + } +); + +export default withProvider(Markdown) as React.FC; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Markdown/style.ts b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/style.ts new file mode 100644 index 00000000..102877ad --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/style.ts @@ -0,0 +1,239 @@ +import { createStyles } from '@ant-design/pro-editor'; + +export const useStyles = createStyles(({ css, cx, token, prefixCls }) => { + const prefix = `${prefixCls}-${token?.editorPrefix}-markdown`; + + return { + container: css` + :not(:last-child) { + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + } + `, + highlight: css` + pre { + padding: 12px !important; + } + `, + markdown: css` + color: ${token.colorText}; + + h1, + h2, + h3, + h4, + h5 { + font-weight: 600; + } + + p { + margin-block-start: 0; + margin-block-end: 0; + + font-size: 14px; + line-height: 1.8; + color: ${token.colorText}; + word-break: break-all; + word-wrap: break-word; + + + * { + margin-block-end: 0.5em; + } + } + + > *:last-child { + margin-bottom: 0 !important; + } + + blockquote { + margin: 16px 0; + padding: 0 12px; + + p { + font-style: italic; + color: ${token.colorTextDescription}; + } + } + + p:not(:last-child) { + margin-bottom: 1em; + } + + a { + color: ${token.colorLink}; + + &:hover { + color: ${token.colorLinkHover}; + } + + &:active { + color: ${token.colorLinkActive}; + } + } + + img { + max-width: 100%; + } + + pre, + [data-code-type='highlighter'] { + border: none; + border-radius: ${token.borderRadius}px; + + > code { + padding: 0 !important; + border: none !important; + } + } + + > :not([data-code-type='highlighter']) code { + padding: 2px 6px; + + font-size: ${token.fontSizeSM}px; + border-radius: ${token.borderRadiusSM}px; + } + + table { + border-spacing: 0; + + width: 100%; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + padding: 8px; + + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadius}px; + + code { + display: inline-flex; + } + } + + th, + td { + padding-block-start: 10px; + padding-block-end: 10px; + padding-inline-start: 16px; + padding-inline-end: 16px; + } + + thead { + tr { + th { + background: ${token.colorFillTertiary}; + + &:first-child { + border-top-left-radius: ${token.borderRadius}px; + border-bottom-left-radius: ${token.borderRadius}px; + } + + &:last-child { + border-top-right-radius: ${token.borderRadius}px; + border-bottom-right-radius: ${token.borderRadius}px; + } + } + } + } + + > ol > li::marker { + color: ${token.colorPrimary} !important; + } + + > ul > li { + line-height: 1.8; + list-style-type: disc; + + &::marker { + color: ${token.colorPrimary} !important; + } + } + + ol, + ul { + > li::marker { + color: ${token.colorTextDescription}; + } + } + + details { + margin-bottom: 1em; + padding: 12px 16px; + + background: ${token.colorFillTertiary}; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusLG}px; + + transition: all 400ms ${token.motionEaseOut}; + } + + details[open] { + summary { + padding-bottom: 12px; + border-bottom: 1px solid ${token.colorBorder}; + } + } + `, + wrapper: cx(css` + background-color: ${token.colorFillTertiary}; + border-radius: ${token.borderRadius}px; + `), + highlighter: css` + max-height: 400px; + overflow: auto; + `, + header: cx( + `${prefix}-header`, + css` + padding: 4px 8px; + width: auto !important; // override self width + `, + css` + .${prefix}-btn { + &:hover { + color: ${token.colorTextSecondary} !important; + } + } + ` + ), + copy: css` + background-color: transparent; + position: inherit; + width: 30px; + padding-left: 6px; + `, + select: css` + min-width: 100px; + .${prefixCls}-select-selector { + padding-inline-end: 4px !important; + } + .${prefixCls}-select-selection-overflow-item-suffix { + .${prefixCls}-select-selection-search { + display: none; + } + } + `, + trigger: css` + min-width: 100px; + display: flex; + justify-content: center; + span { + font-family: ${token.fontFamilyCode} !important; + } + `, + lang: cx(css` + position: absolute; + z-index: 2; + right: 0; + bottom: 8px; + + font-family: ${token.fontFamilyCode}; + color: ${token.colorTextSecondary}; + + transition: opacity 0.1s; + `), + }; +}); diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Markdown/wrapper.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/wrapper.tsx new file mode 100644 index 00000000..0404a7c4 --- /dev/null +++ b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/wrapper.tsx @@ -0,0 +1,83 @@ +import { CopyButton } from '@ant-design/pro-chat'; +import { DownOutlined, RightOutlined } from '@ant-design/icons'; +import { ActionIcon, Button, Select, type SelectProps } from '@ant-design/pro-editor'; +import { HIGHLIGHT_LANGUAGES, Highlight } from '../Highlight'; +import classNames from 'classnames'; +import { memo, useMemo, useState } from 'react'; +import { Flexbox } from 'react-layout-kit'; +import { useStyles } from './style'; +import React from 'react'; +const options: SelectProps['options'] = HIGHLIGHT_LANGUAGES.map((key) => ({ + label: key, + value: key.toLowerCase(), +})); + +export interface HighlightWrapperProps { + /** + * @description The code content to be highlighted + */ + children?: any; + /** + * @description The language of the code content + */ + language?: string; + /** + * classNames + */ + className?: string; + /** + * style + */ + style?: React.CSSProperties; +} + +const HighlightWrapper = memo((props: HighlightWrapperProps) => { + const { children, language = 'markdown', className, style } = props || {}; + const [expand, setExpand] = useState(true); + const [lang, setLang] = useState(language); + const { styles } = useStyles(); + + const highlightBlock = useMemo(() => { + return ( + + {children} + + ); + }, [lang, children]); + + return ( +
+ + : } + onClick={() => setExpand(!expand)} + size={24} + /> + - + @@ -128,7 +136,7 @@ const Chat: React.FC = () => { const { baseUrl, apiKey, modelName } = config; const model = new ChatOpenAI({ apiKey, - configuration: { baseURL: baseUrl, fetch }, + configuration: { baseURL: baseUrl }, model: modelName, temperature: 0.95, maxRetries: 3, @@ -136,25 +144,36 @@ const Chat: React.FC = () => { setLLMInstance(model); setModelConfig(config); }; + useEffect(() => { - // 在组件加载时检查并创建 LLM 实例 const info = getLLMInfo(); if (info.baseUrl && info.apiKey && info.modelName) { createLLMInstance(info); } }, []); + + useEffect(() => { + (async function () { + setOptions(await optionsStorage.getAll()); + i18n.changeLanguage(options.locale); + })(); + }, [options.locale]); + return ( -
+
{ + if (chat.length == 0) { + memory = new ChatMessageHistory(); + } + }} request={async (messages) => { if (!llmInstance) { - // 插入一条消息，提示用户先填写配置信息 setChats([ { content: JSON.stringify({}), @@ -169,7 +188,13 @@ const Chat: React.FC = () => { return; } try { - return await getResponse(messages.at(-1)?.content?.toString(), llmInstance); + const aiRunnableConfig: RunnableConfig = { + configurable: { + sessionId: sessionId, + }, + }; + console.log(); + return await getResponse(messages.at(-1)?.content?.toString(), llmInstance, aiRunnableConfig, memory); } catch (error: any) { return error.message; } @@ -180,7 +205,6 @@ const Chat: React.FC = () => { { - console.log; setChats([ { content: JSON.stringify({}), @@ -194,7 +218,7 @@ const Chat: React.FC = () => { ]); }} > - 选择模型 + {t('oss_gpt_llm_switch')} , ...defaultDoms, ]; @@ -223,16 +247,17 @@ const Chat: React.FC = () => { return ( -
+
- Hello！ - {botInfo.assistantMeta?.title} + {botInfo.helloMessage}
-
{props.message}
} @@ -286,7 +311,7 @@ const Chat: React.FC = () => { ); @@ -298,7 +323,7 @@ const Chat: React.FC = () => { setComplete(true)} /> @@ -311,17 +336,19 @@ const Chat: React.FC = () => { - - - {answerStr} - - + + {answerStr} +
} /> @@ -332,9 +359,9 @@ const Chat: React.FC = () => {
); }; -const OssGpt: React.FC = () => ( +const OssGpt: React.FC = ({ githubTheme }) => ( - + ); export default OssGpt; diff --git a/src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx index 616bb9c6..4822cbfb 100644 --- a/src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx +++ b/src/pages/ContentScripts/features/oss-gpt/components/Markdown/CodeBlock.tsx @@ -36,7 +36,6 @@ export const Code = memo((properties: any) => { const content = Array.isArray(children) ? (children[0] as string) : children; const lang = className?.replace('language-', '') || 'txt'; - console.log(countLines(content)); if (countLines(content) === 1 && content.length <= 60) { return ( { const encoder = new TextEncoder(); @@ -26,10 +29,26 @@ export const convertChunkToJson = (rawData: string) => { // final message return { message: messages.join('') }; }; -export const getResponse = async (messages: any, model: any) => { - const prompt = ChatPromptTemplate.fromMessages([HumanMessagePromptTemplate.fromTemplate('{input}')].filter(Boolean)); +export const getResponse = async ( + messages: any, + model: any, + aiRunnableConfig: RunnableConfig, + memory: ChatMessageHistory +) => { + const prompt = ChatPromptTemplate.fromMessages([ + ['system', 'You are an intelligent question answering robot from x-lab laboratory on the GitHub platform. Your feature is GitHub related Q&A.'], + new MessagesPlaceholder('chat_history'), + HumanMessagePromptTemplate.fromTemplate('{input}'), + ]); + const chain = prompt.pipe(model); - const basePrompt = '你是来自x-lab实验室的围绕GitHub平台的智能问答机器人'; - const responseStream = await chain.stream({ input: basePrompt + messages }); + const chainWithMessageHistory = new RunnableWithMessageHistory({ + runnable: chain, + getMessageHistory: (_sessionId) => memory, + inputMessagesKey: 'input', + historyMessagesKey: 'chat_history', + }); + + const responseStream = await chainWithMessageHistory.stream({ input: messages }, aiRunnableConfig); return handleStream(responseStream); }; diff --git a/src/pages/ContentScripts/features/oss-gpt/view.tsx b/src/pages/ContentScripts/features/oss-gpt/view.tsx index a9795d8b..2200edc2 100644 --- a/src/pages/ContentScripts/features/oss-gpt/view.tsx +++ b/src/pages/ContentScripts/features/oss-gpt/view.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import { CommentOutlined, CloseOutlined } from '@ant-design/icons'; -import { FloatButton, Popover, theme, ConfigProvider } from 'antd'; +import { ThemeProvider } from 'antd-style'; +import { FloatButton, Popover, theme } from 'antd'; import OssGpt from './OssGpt'; import eventEmitter from '../../../../helpers/eventEmitter'; interface Props { @@ -8,41 +9,37 @@ interface Props { } const View = ({ githubTheme }: Props): JSX.Element => { const [isOpen, setIsOpen] = useState(false); - const switchIcon = () => { setIsOpen(!isOpen); }; return ( - + appearance === 'dark' + ? { + algorithm: theme.darkAlgorithm, + } + : undefined + } > } - title={ -
OSS-GPT
- } + content={} + title={
OSS-GPT
} placement="topRight" arrow={false} - overlayStyle={{ position: 'fixed', bottom: 130, right: 12, width: 524, height: 580 }} + overlayStyle={{ position: 'fixed', bottom: 130, right: 12, width: 564, height: 580 }} destroyTooltipOnHide={true} open={isOpen} > - {isOpen ? : } - - } + icon={{isOpen ? : }} onClick={switchIcon} > - + ); }; diff --git a/yarn.lock b/yarn.lock index 27ecf784..e7a3422d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2380,7 +2380,7 @@ dependencies: "@types/react" "*" -"@types/react-dom@^18.0.0": +"@types/react-dom@^18.0.5": version "18.3.0" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0" integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg== @@ -2394,10 +2394,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.0.0": - version "18.3.8" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.8.tgz#1672ab19993f8aca7c7dc844c07d5d9e467d5a79" - integrity sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q== +"@types/react@*", "@types/react@^18.2.8": + version "18.3.9" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.9.tgz#2cdf5f425ec8a133d67e9e3673909738b783db20" + integrity sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ== dependencies: "@types/prop-types" "*" csstype "^3.0.2" @@ -8398,10 +8398,10 @@ typed-query-selector@^2.6.1: resolved "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.11.2.tgz#30f9a2d7d51fc08781b277dff91c61aa8dd756c3" integrity sha512-6rZP+cG3wPg2w1Zqv2VCOsSqlkGElrLSGeEkyrIU9mHG+JfQZE/6lE3oyQouz42sTS9n8fQXvwQBaVWz6dzpfQ== -typescript@^4.8.3: - version "4.9.5" - resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" - integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== +typescript@^5: + version "5.6.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.2.tgz#d1de67b6bef77c41823f822df8f0b3bcff60a5a0" + integrity sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw== undici-types@~5.26.4: version "5.26.5" From 5f6219d50a32ade32b056958dd84407acd1117b0 Mon Sep 17 00:00:00 2001 From: wangyantong2000 <18745996292@163.com> Date: Thu, 26 Sep 2024 23:34:59 +0800 Subject: [PATCH 3/4] refactor --- src/pages/ContentScripts/features/oss-gpt/service.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/ContentScripts/features/oss-gpt/service.ts b/src/pages/ContentScripts/features/oss-gpt/service.ts index 00368f38..7f400f25 100644 --- a/src/pages/ContentScripts/features/oss-gpt/service.ts +++ b/src/pages/ContentScripts/features/oss-gpt/service.ts @@ -36,7 +36,10 @@ export const getResponse = async ( memory: ChatMessageHistory ) => { const prompt = ChatPromptTemplate.fromMessages([ - ['system', 'You are an intelligent question answering robot from x-lab laboratory on the GitHub platform. Your feature is GitHub related Q&A.'], + [ + 'system', + 'You are an intelligent question answering robot from x-lab laboratory on the GitHub platform. Your feature is GitHub related Q&A.', + ], new MessagesPlaceholder('chat_history'), HumanMessagePromptTemplate.fromTemplate('{input}'), ]); From f8e382ed7d4989f5448e6ceecb41b5b2f37bd269 Mon Sep 17 00:00:00 2001 From: wangyantong2000 <18745996292@163.com> Date: Sat, 28 Sep 2024 19:24:41 +0800 Subject: [PATCH 4/4] change --- .../ContentScripts/features/oss-gpt/index.css | 554 ------------------ 1 file changed, 554 deletions(-) diff --git a/src/pages/ContentScripts/features/oss-gpt/index.css b/src/pages/ContentScripts/features/oss-gpt/index.css index f0df5b0d..a87d5ee1 100644 --- a/src/pages/ContentScripts/features/oss-gpt/index.css +++ b/src/pages/ContentScripts/features/oss-gpt/index.css @@ -20,560 +20,6 @@ content-visibility: auto; contain-intrinsic-size: 100px; } -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*:where(.petercat-lui, .petercat-lui *), -::before:where(.petercat-lui, .petercat-lui *), -::after:where(.petercat-lui, .petercat-lui *) { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before:where(.petercat-lui, .petercat-lui *), -::after:where(.petercat-lui, .petercat-lui *) { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -.petercat-lui { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -.petercat-lui { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr:where(.petercat-lui, .petercat-lui *) { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]):where(.petercat-lui, .petercat-lui *) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1:where(.petercat-lui, .petercat-lui *), -h2:where(.petercat-lui, .petercat-lui *), -h3:where(.petercat-lui, .petercat-lui *), -h4:where(.petercat-lui, .petercat-lui *), -h5:where(.petercat-lui, .petercat-lui *), -h6:where(.petercat-lui, .petercat-lui *) { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a:where(.petercat-lui, .petercat-lui *) { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b:where(.petercat-lui, .petercat-lui *), -strong:where(.petercat-lui, .petercat-lui *) { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code:where(.petercat-lui, .petercat-lui *), -kbd:where(.petercat-lui, .petercat-lui *), -samp:where(.petercat-lui, .petercat-lui *), -pre:where(.petercat-lui, .petercat-lui *) { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small:where(.petercat-lui, .petercat-lui *) { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub:where(.petercat-lui, .petercat-lui *), -sup:where(.petercat-lui, .petercat-lui *) { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub:where(.petercat-lui, .petercat-lui *) { - bottom: -0.25em; -} - -sup:where(.petercat-lui, .petercat-lui *) { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table:where(.petercat-lui, .petercat-lui *) { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button:where(.petercat-lui, .petercat-lui *), -input:where(.petercat-lui, .petercat-lui *), -optgroup:where(.petercat-lui, .petercat-lui *), -select:where(.petercat-lui, .petercat-lui *), -textarea:where(.petercat-lui, .petercat-lui *) { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button:where(.petercat-lui, .petercat-lui *), -select:where(.petercat-lui, .petercat-lui *) { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button:where(.petercat-lui, .petercat-lui *), -input:where([type='button']):where(.petercat-lui, .petercat-lui *), -input:where([type='reset']):where(.petercat-lui, .petercat-lui *), -input:where([type='submit']):where(.petercat-lui, .petercat-lui *) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring:where(.petercat-lui, .petercat-lui *) { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid:where(.petercat-lui, .petercat-lui *) { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress:where(.petercat-lui, .petercat-lui *) { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button:where(.petercat-lui, .petercat-lui *), -::-webkit-outer-spin-button:where(.petercat-lui, .petercat-lui *) { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search']:where(.petercat-lui, .petercat-lui *) { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration:where(.petercat-lui, .petercat-lui *) { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button:where(.petercat-lui, .petercat-lui *) { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary:where(.petercat-lui, .petercat-lui *) { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote:where(.petercat-lui, .petercat-lui *), -dl:where(.petercat-lui, .petercat-lui *), -dd:where(.petercat-lui, .petercat-lui *), -h1:where(.petercat-lui, .petercat-lui *), -h2:where(.petercat-lui, .petercat-lui *), -h3:where(.petercat-lui, .petercat-lui *), -h4:where(.petercat-lui, .petercat-lui *), -h5:where(.petercat-lui, .petercat-lui *), -h6:where(.petercat-lui, .petercat-lui *), -hr:where(.petercat-lui, .petercat-lui *), -figure:where(.petercat-lui, .petercat-lui *), -p:where(.petercat-lui, .petercat-lui *), -pre:where(.petercat-lui, .petercat-lui *) { - margin: 0; -} - -fieldset:where(.petercat-lui, .petercat-lui *) { - margin: 0; - padding: 0; -} - -legend:where(.petercat-lui, .petercat-lui *) { - padding: 0; -} - -ol:where(.petercat-lui, .petercat-lui *), -ul:where(.petercat-lui, .petercat-lui *), -menu:where(.petercat-lui, .petercat-lui *) { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog:where(.petercat-lui, .petercat-lui *) { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea:where(.petercat-lui, .petercat-lui *) { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder:where(.petercat-lui, .petercat-lui *), -textarea::-moz-placeholder:where(.petercat-lui, .petercat-lui *) { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder:where(.petercat-lui, .petercat-lui *), -textarea::placeholder:where(.petercat-lui, .petercat-lui *) { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button:where(.petercat-lui, .petercat-lui *), -[role='button']:where(.petercat-lui, .petercat-lui *) { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled:where(.petercat-lui, .petercat-lui *) { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img:where(.petercat-lui, .petercat-lui *), -svg:where(.petercat-lui, .petercat-lui *), -video:where(.petercat-lui, .petercat-lui *), -canvas:where(.petercat-lui, .petercat-lui *), -audio:where(.petercat-lui, .petercat-lui *), -iframe:where(.petercat-lui, .petercat-lui *), -embed:where(.petercat-lui, .petercat-lui *), -object:where(.petercat-lui, .petercat-lui *) { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img:where(.petercat-lui, .petercat-lui *), -video:where(.petercat-lui, .petercat-lui *) { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden]:where(.petercat-lui, .petercat-lui *) { - display: none; -} - -*, -::before, -::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} .visible { visibility: visible;