From 439530f26faedfb6ae516853f86a7a9262c84d3f Mon Sep 17 00:00:00 2001 From: Edwin Date: Thu, 6 Jul 2023 16:03:18 +0800 Subject: [PATCH 1/2] Add form-title component --- .../form-title/form-title.styles.ts | 10 ++++++++ .../src/components/form-title/index.tsx | 19 +++++++++++++++ .../chat-panel/chat-panel.styles.ts | 9 -------- .../chat/components/chat-panel/index.tsx | 11 +++++---- .../pages/chat/components/settings/index.tsx | 23 +++++++++++-------- .../components/settings/settings.styles.ts | 9 -------- 6 files changed, 49 insertions(+), 32 deletions(-) create mode 100644 packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts create mode 100644 packages/gpt-runner-web/client/src/components/form-title/index.tsx diff --git a/packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts b/packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts new file mode 100644 index 0000000..eefc6ee --- /dev/null +++ b/packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components' + +export const FormTitleWrapper = styled.div` + padding-left: 0.5rem; + margin: 1rem; + margin-bottom: 0; + font-size: 1rem; + font-weight: bold; + border-left: 0.25rem solid var(--foreground); +` diff --git a/packages/gpt-runner-web/client/src/components/form-title/index.tsx b/packages/gpt-runner-web/client/src/components/form-title/index.tsx new file mode 100644 index 0000000..d22549a --- /dev/null +++ b/packages/gpt-runner-web/client/src/components/form-title/index.tsx @@ -0,0 +1,19 @@ +import type { FC } from 'react' +import { memo } from 'react' +import { FormTitleWrapper } from './form-title.styles' + +export interface FormTitleProps { + style?: React.CSSProperties + children: React.ReactNode +} + +export const FormTitle: FC = memo(({ + style, + children, +}) => { + return ( + + {children} + + ) +}) diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/chat-panel.styles.ts b/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/chat-panel.styles.ts index f7bc180..4b3a05d 100644 --- a/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/chat-panel.styles.ts +++ b/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/chat-panel.styles.ts @@ -17,12 +17,3 @@ export const ChatPanelWrapper = styled.div` export const ChatPanelPopoverTreeWrapper = styled.div` height: 100%; ` - -export const ConfigFormTitle = styled.div` - padding-left: 0.5rem; - margin: 1rem; - margin-bottom: 0; - font-size: 1rem; - font-weight: bold; - border-left: 0.25rem solid var(--foreground); -` diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx index 3f3459a..e102b95 100644 --- a/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx +++ b/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx @@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next' import { toast } from 'react-hot-toast' import { copyToClipboard } from '@nicepkg/gpt-runner-shared/browser' import type { ChatMessagePanelProps } from '../../../../components/chat-message-panel' +import { FormTitle } from '../../../../components/form-title' import { ChatMessagePanel } from '../../../../components/chat-message-panel' import { ChatMessageInput } from '../../../../components/chat-message-input' import { IconButton } from '../../../../components/icon-button' @@ -24,7 +25,7 @@ import { emitter } from '../../../../helpers/emitter' import { ModelSettings } from '../settings/components/model-settings' import { ContentWrapper } from '../../chat.styles' import { ContextSettings } from '../settings/components/context-settings' -import { ChatPanelPopoverTreeWrapper, ChatPanelWrapper, ConfigFormTitle } from './chat-panel.styles' +import { ChatPanelPopoverTreeWrapper, ChatPanelWrapper } from './chat-panel.styles' import { createRemarkOpenEditorPlugin } from './remark-plugin' export interface ChatPanelProps { @@ -363,14 +364,14 @@ export const ChatPanel: FC = memo((props) => { return - + {` ${t('chat_page.override_settings')}`} - + - + {t('chat_page.context_settings')} - + }} diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx index cbdf3ba..7a804f4 100644 --- a/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx +++ b/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx @@ -2,6 +2,7 @@ import { type CSSProperties, type FC, memo, useEffect, useMemo, useState } from import { VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react' import { useTranslation } from 'react-i18next' import { StyledVSCodePanels } from '../../chat.styles' +import { FormTitle } from '../../../../components/form-title' import type { MessageCodeBlockTheme } from '../../../../components/chat-message-code-block' import { MessageCodeBlock } from '../../../../components/chat-message-code-block' import { useGlobalStore } from '../../../../store/zustand/global' @@ -11,7 +12,7 @@ import { LoadingView } from '../../../../components/loading-view' import { useConfetti } from '../../../../hooks/use-confetti.hook' import { useElementVisible } from '../../../../hooks/use-element-visible.hook' import { useUserConfig } from '../../../../hooks/use-user-config.hook' -import { ConfigInfoTitle, ConfigInfoWrapper } from './settings.styles' +import { ConfigInfoWrapper } from './settings.styles' import { GeneralSettings } from './components/general-settings' import { About } from './components/about' import { ProxySettings } from './components/proxy-settings' @@ -71,32 +72,36 @@ export const Settings: FC = memo((props) => { const renderOverrideSetting = () => { return - {t('chat_page.settings_general')} + + {t('chat_page.settings_general')} + - {t('chat_page.settings_proxy')} + + {t('chat_page.settings_proxy')} + - + {` ${t('chat_page.settings_config')}`} - + } const renderGlobalConfigInfo = () => { return - + gptr.config.json - + } const renderSingleFileConfigInfo = () => { return - + {gptFileName} - + } diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/settings/settings.styles.ts b/packages/gpt-runner-web/client/src/pages/chat/components/settings/settings.styles.ts index b77e42b..282b417 100644 --- a/packages/gpt-runner-web/client/src/pages/chat/components/settings/settings.styles.ts +++ b/packages/gpt-runner-web/client/src/pages/chat/components/settings/settings.styles.ts @@ -25,15 +25,6 @@ export const ConfigInfoWrapper = styled.div` } ` -export const ConfigInfoTitle = styled.div` - margin: 1rem; - margin-bottom: 0; - padding-left: 0.5rem; - font-size: 1.2rem; - font-weight: bold; - border-left: 0.25rem solid var(--foreground); -` - export const StyledForm = styled.form` display: flex; flex-direction: column; From 0f639b3a6980b9785a09c280bdc54952a0e27c10 Mon Sep 17 00:00:00 2001 From: Edwin Date: Thu, 6 Jul 2023 17:01:24 +0800 Subject: [PATCH 2/2] Optimize types --- .../components/form-title/form-title.styles.ts | 15 +++++++++++++-- .../client/src/components/form-title/index.tsx | 10 ++++++++-- .../src/pages/chat/components/settings/index.tsx | 10 +++++----- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts b/packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts index eefc6ee..13a6054 100644 --- a/packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts +++ b/packages/gpt-runner-web/client/src/components/form-title/form-title.styles.ts @@ -1,10 +1,21 @@ import styled from 'styled-components' +import type { CSSProperties } from 'react' -export const FormTitleWrapper = styled.div` +export enum FormTitleSize { + Normal = 'normal', + Large = 'large', +} + +const sizeFontSizeMap: Record = { + [FormTitleSize.Normal]: '1rem', + [FormTitleSize.Large]: '1.2rem', +} + +export const FormTitleWrapper = styled.div<{ $size: `${FormTitleSize}` }>` padding-left: 0.5rem; margin: 1rem; margin-bottom: 0; - font-size: 1rem; + font-size: ${({ $size }) => sizeFontSizeMap[$size]}; font-weight: bold; border-left: 0.25rem solid var(--foreground); ` diff --git a/packages/gpt-runner-web/client/src/components/form-title/index.tsx b/packages/gpt-runner-web/client/src/components/form-title/index.tsx index d22549a..b946b68 100644 --- a/packages/gpt-runner-web/client/src/components/form-title/index.tsx +++ b/packages/gpt-runner-web/client/src/components/form-title/index.tsx @@ -1,18 +1,24 @@ import type { FC } from 'react' import { memo } from 'react' -import { FormTitleWrapper } from './form-title.styles' +import { FormTitleSize, FormTitleWrapper } from './form-title.styles' + +export { FormTitleSize } + +type SizeValues = `${FormTitleSize}` export interface FormTitleProps { + size?: SizeValues style?: React.CSSProperties children: React.ReactNode } export const FormTitle: FC = memo(({ + size = FormTitleSize.Normal, style, children, }) => { return ( - + {children} ) diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx index 7a804f4..5089e43 100644 --- a/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx +++ b/packages/gpt-runner-web/client/src/pages/chat/components/settings/index.tsx @@ -72,15 +72,15 @@ export const Settings: FC = memo((props) => { const renderOverrideSetting = () => { return - + {t('chat_page.settings_general')} - + {t('chat_page.settings_proxy')} - + {` ${t('chat_page.settings_config')}`} @@ -90,7 +90,7 @@ export const Settings: FC = memo((props) => { const renderGlobalConfigInfo = () => { return - + gptr.config.json @@ -99,7 +99,7 @@ export const Settings: FC = memo((props) => { const renderSingleFileConfigInfo = () => { return - + {gptFileName}