From f83c92cb87aed991ec95df52c83dc74ed763a58c Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Fri, 16 Jun 2023 15:12:59 +0800
Subject: [PATCH] style: temporarily adjust the style of the co-pilot (#2804)

---
 plugins/copilot/src/UI/detail-content.tsx     |  9 +++++++-
 plugins/copilot/src/UI/index.css.ts           | 22 ++++++++++++++-----
 .../components/conversation-list/index.css.ts |  2 ++
 .../core/components/conversation/index.css.ts |  5 ++++-
 .../core/components/following-up/index.css.ts |  9 +++++---
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/plugins/copilot/src/UI/detail-content.tsx b/plugins/copilot/src/UI/detail-content.tsx
index 2ada4adf6..5b5a12fd1 100644
--- a/plugins/copilot/src/UI/detail-content.tsx
+++ b/plugins/copilot/src/UI/detail-content.tsx
@@ -9,7 +9,12 @@ import { createRoot } from 'react-dom/client';
 import { ConversationList } from '../core/components/conversation-list';
 import { FollowingUp } from '../core/components/following-up';
 import { openAIApiKeyAtom, useChatAtoms } from '../core/hooks';
-import { detailContentActionsStyle, detailContentStyle } from './index.css';
+import {
+  detailContentActionsStyle,
+  detailContentStyle,
+  inputStyle,
+  sendButtonStyle,
+} from './index.css';
 
 if (typeof window === 'undefined') {
   import('@blocksuite/blocks')
@@ -67,12 +72,14 @@ const Actions = () => {
       <FollowingUp questions={questions} />
       <div className={detailContentActionsStyle}>
         <Input
+          className={inputStyle}
           value={input}
           onChange={text => {
             setInput(text);
           }}
         />
         <Button
+          className={sendButtonStyle}
           onClick={useCallback(async () => {
             await call(input);
             await generateFollowingUp();
diff --git a/plugins/copilot/src/UI/index.css.ts b/plugins/copilot/src/UI/index.css.ts
index 53d3ae65c..ded282e0c 100644
--- a/plugins/copilot/src/UI/index.css.ts
+++ b/plugins/copilot/src/UI/index.css.ts
@@ -5,11 +5,23 @@ export const detailContentStyle = style({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
-
   overflow: 'auto',
-
-  paddingLeft: '9px',
-  paddingRight: '9px',
+  padding: '10px',
+  borderLeft: '1px solid var(--affine-border-color)',
+  borderTop: '1px solid var(--affine-border-color)',
 });
 
-export const detailContentActionsStyle = style({});
+export const detailContentActionsStyle = style({
+  marginTop: 'auto',
+  alignItems: 'flex-end',
+  marginBottom: '10px',
+  fontSize: 'var(--affine-font-xs)',
+});
+export const inputStyle = style({
+  fontSize: 'var(--affine-font-xs)',
+});
+export const sendButtonStyle = style({
+  marginTop: '10px',
+  borderRadius: '8px',
+  fontSize: 'var(--affine-font-xs)',
+});
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 02c837150..e90570ed3 100644
--- a/plugins/copilot/src/core/components/conversation-list/index.css.ts
+++ b/plugins/copilot/src/core/components/conversation-list/index.css.ts
@@ -4,4 +4,6 @@ export const conversationListStyle = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '30px',
+  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 cb09dbf48..a5c57e357 100644
--- a/plugins/copilot/src/core/components/conversation/index.css.ts
+++ b/plugins/copilot/src/core/components/conversation/index.css.ts
@@ -2,6 +2,9 @@ import { style } from '@vanilla-extract/css';
 
 export const conversationStyle = style({
   padding: '10px 18px',
+  border: '1px solid var(--affine-border-color)',
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: '16px',
 });
 
 export const aiMessageStyle = style({
@@ -11,5 +14,5 @@ export const aiMessageStyle = style({
 
 export const humanMessageStyle = style({
   borderRadius: '18px 18px 2px 18px',
-  backgroundColor: 'white',
+  backgroundColor: 'var(--affine-white-90)',
 });
diff --git a/plugins/copilot/src/core/components/following-up/index.css.ts b/plugins/copilot/src/core/components/following-up/index.css.ts
index 020599976..0b6975462 100644
--- a/plugins/copilot/src/core/components/following-up/index.css.ts
+++ b/plugins/copilot/src/core/components/following-up/index.css.ts
@@ -6,12 +6,15 @@ export const followingUpStyle = style({
   flexWrap: 'wrap',
   gap: '10px',
   alignItems: 'flex-start',
+  marginTop: '10px',
+  marginBottom: '10px',
 });
 
 export const questionStyle = style({
-  backgroundColor: 'white',
+  backgroundColor: 'var(--affine-white-90)',
+  fontSize: 'var(--affine-font-xs)',
+  border: '1px solid var(--affine-border-color)',
   borderRadius: '8px',
-  color: '#8E8D91',
-  padding: '2px 10px',
+  padding: '6px 12px',
   cursor: 'pointer',
 });