style: adjust copilot chat style (#2915)

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 = () => {
     <>
       <FollowingUp questions={questions} />
       <div className={detailContentActionsStyle}>
-        <Input
-          className={inputStyle}
+        <textarea
+          className={textareaStyle}
           value={input}
-          onChange={text => {
-            setInput(text);
+          placeholder="Type here ask Copilot some thing..."
+          onChange={e => {
+            setInput(e.target.value);
           }}
         />
-        <Button
+        <IconButton
           className={sendButtonStyle}
           onClick={useCallback(async () => {
             await call(input);
             await generateFollowingUp();
           }, [call, generateFollowingUp, input])}
         >
-          send
-        </Button>
+          <SendIcon />
+        </IconButton>
       </div>
     </>
   );

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',
+  },
 });