From 6f9487deb72aaed0946108b9e87258ec65c1ee55 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Mon, 3 Jul 2023 13:57:30 +0800 Subject: [PATCH] style: adjust copilot chat style (#2915) --- plugins/copilot/src/UI/detail-content.tsx | 20 +++--- plugins/copilot/src/UI/index.css.ts | 24 +++++-- .../components/conversation-list/index.css.ts | 2 +- .../core/components/conversation/index.css.ts | 70 +++++++++++++++++-- .../core/components/conversation/index.tsx | 63 +++++++++++++---- 5 files changed, 149 insertions(+), 30 deletions(-) diff --git a/plugins/copilot/src/UI/detail-content.tsx b/plugins/copilot/src/UI/detail-content.tsx index 5b5a12fd12..e762cef517 100644 --- a/plugins/copilot/src/UI/detail-content.tsx +++ b/plugins/copilot/src/UI/detail-content.tsx @@ -1,4 +1,5 @@ -import { Button, Input } from '@affine/component'; +import { IconButton } from '@affine/component'; +import { SendIcon } from '@blocksuite/icons'; import { rootStore } from '@toeverything/plugin-infra/manager'; import type { PluginUIAdapter } from '@toeverything/plugin-infra/type'; import { Provider, useAtomValue, useSetAtom } from 'jotai'; @@ -12,8 +13,8 @@ import { openAIApiKeyAtom, useChatAtoms } from '../core/hooks'; import { detailContentActionsStyle, detailContentStyle, - inputStyle, sendButtonStyle, + textareaStyle, } from './index.css'; if (typeof window === 'undefined') { @@ -71,22 +72,23 @@ const Actions = () => { <>
- { - setInput(text); + placeholder="Type here ask Copilot some thing..." + onChange={e => { + setInput(e.target.value); }} /> - + +
); diff --git a/plugins/copilot/src/UI/index.css.ts b/plugins/copilot/src/UI/index.css.ts index ded282e0cf..5299348700 100644 --- a/plugins/copilot/src/UI/index.css.ts +++ b/plugins/copilot/src/UI/index.css.ts @@ -13,15 +13,31 @@ export const detailContentStyle = style({ export const detailContentActionsStyle = style({ marginTop: 'auto', - alignItems: 'flex-end', marginBottom: '10px', fontSize: 'var(--affine-font-xs)', + display: 'flex', + width: '100%', + justifyContent: 'space-between', }); -export const inputStyle = style({ +export const textareaStyle = style({ fontSize: 'var(--affine-font-xs)', + border: '1px solid var(--affine-border-color)', + width: '100%', + borderRadius: '4px', + background: 'var(--affine-hover-color)', + height: '117px', + padding: '8px 10px', + '::placeholder': { + color: 'var(--affine-text-secondary-color)', + }, }); export const sendButtonStyle = style({ - marginTop: '10px', - borderRadius: '8px', fontSize: 'var(--affine-font-xs)', + width: '16px', + height: '16px', + marginLeft: '8px', + ':hover': { + cursor: 'pointer', + backgroundColor: 'transparent', + }, }); diff --git a/plugins/copilot/src/core/components/conversation-list/index.css.ts b/plugins/copilot/src/core/components/conversation-list/index.css.ts index e90570ed38..b5344ce2c7 100644 --- a/plugins/copilot/src/core/components/conversation-list/index.css.ts +++ b/plugins/copilot/src/core/components/conversation-list/index.css.ts @@ -3,7 +3,7 @@ import { style } from '@vanilla-extract/css'; export const conversationListStyle = style({ display: 'flex', flexDirection: 'column', - gap: '30px', + gap: '24px', height: 'calc(100% - 100px)', overflow: 'auto', }); diff --git a/plugins/copilot/src/core/components/conversation/index.css.ts b/plugins/copilot/src/core/components/conversation/index.css.ts index a5c57e3578..8875b4487d 100644 --- a/plugins/copilot/src/core/components/conversation/index.css.ts +++ b/plugins/copilot/src/core/components/conversation/index.css.ts @@ -1,18 +1,80 @@ -import { style } from '@vanilla-extract/css'; +import { globalStyle, style } from '@vanilla-extract/css'; +export const containerStyle = style({ + display: 'flex', + width: '100%', + padding: '0 16px', + gap: '10px', +}); export const conversationStyle = style({ padding: '10px 18px', border: '1px solid var(--affine-border-color)', fontSize: 'var(--affine-font-xs)', lineHeight: '16px', + borderRadius: '18px', + position: 'relative', +}); +export const conversationContainerStyle = style({ + maxWidth: '90%', + display: 'flex', + flexDirection: 'column', + position: 'relative', +}); +export const insertButtonsStyle = style({ + width: '100%', + marginTop: '10px', + display: 'flex', + flexWrap: 'wrap', + gap: '8px', +}); +export const insertButtonStyle = style({ + maxWidth: '100%', + padding: '16px 8px', + fontSize: 'var(--affine-font-xs)', + borderRadius: '8px', + border: '1px solid var(--affine-border-color)', + cursor: 'pointer', + backgroundColor: 'var(--affine-white)', + gap: '8px', + ':hover': { + background: 'var(--affine-white),var(--affine-hover-color)', + borderColor: 'var(--affine-border-color)', + }, +}); +export const avatarRightStyle = style({ + flexDirection: 'row-reverse', }); - export const aiMessageStyle = style({ backgroundColor: 'rgba(207, 252, 255, 0.3)', - borderRadius: '18px 18px 18px 2px', }); export const humanMessageStyle = style({ - borderRadius: '18px 18px 2px 18px', backgroundColor: 'var(--affine-white-90)', }); +export const regenerateButtonStyle = style({ + position: 'absolute', + display: 'none', + right: '12px', + top: '-16px', + padding: '4px 8px', + fontSize: 'var(--affine-font-xs)', + borderRadius: '8px', + border: '1px solid var(--affine-border-color)', + cursor: 'pointer', + backgroundColor: 'var(--affine-white)', + ':hover': { + background: + 'linear-gradient(var(--affine-white),var(--affine-white)),var(--affine-hover-color)', + backgroundBlendMode: 'overlay', + display: 'flex', + }, +}); +export const resetIconStyle = style({ + fontSize: 'var(--affine-font-sm)', + display: 'inline-flex', + alignItems: 'center', + marginRight: '4px', +}); +globalStyle(`${conversationStyle}:hover ${regenerateButtonStyle}`, { + display: 'flex', +}); diff --git a/plugins/copilot/src/core/components/conversation/index.tsx b/plugins/copilot/src/core/components/conversation/index.tsx index afe0c9b4c1..36f4b599c9 100644 --- a/plugins/copilot/src/core/components/conversation/index.tsx +++ b/plugins/copilot/src/core/components/conversation/index.tsx @@ -1,3 +1,6 @@ +import { Button } from '@affine/component'; +import { WorkspaceAvatar } from '@affine/component/workspace-avatar'; +import { PlusIcon, ResetIcon } from '@blocksuite/icons'; import { clsx } from 'clsx'; import type { MessageType } from 'langchain/schema'; import { marked } from 'marked'; @@ -5,11 +8,7 @@ import { gfmHeadingId } from 'marked-gfm-heading-id'; import { mangle } from 'marked-mangle'; import { type ReactElement, useMemo } from 'react'; -import { - aiMessageStyle, - conversationStyle, - humanMessageStyle, -} from './index.css'; +import * as styles from './index.css'; marked.use( gfmHeadingId({ @@ -28,13 +27,53 @@ export const Conversation = (props: ConversationProps): ReactElement => { const html = useMemo(() => marked.parse(props.text), [props.text]); return (
+ > + +
+
+ {props.type === 'ai' ? ( +
+
+ +
+ Regenerate +
+ ) : null} +
+
+ {props.type === 'ai' ? ( +
+ + +
+ ) : null} +
+ ); };