feat: add placeholder for OPENAI_API_KEY input (#3486)

apps/core/src/components/affine/setting-modal/general-setting/plugins/index.tsx

@@ -8,6 +8,8 @@ import { useAtomValue } from 'jotai';
 import type { FC, ReactNode } from 'react';
 import { useRef } from 'react';
 
+import { pluginItem } from './style.css';
+
 const PluginSettingWrapper: FC<{
   id: string;
   title?: ReactNode;
@@ -45,7 +47,9 @@ export const Plugins = () => {
         data-testid="plugins-title"
       />
       {allowedPlugins.map(plugin => (
-        <PluginSettingWrapper key={plugin} id={plugin} title={plugin} />
+        <div className={pluginItem} key={plugin}>
+          <PluginSettingWrapper key={plugin} id={plugin} title={plugin} />
+        </div>
       ))}
     </>
   );

apps/core/src/components/affine/setting-modal/general-setting/plugins/style.css.ts

@@ -7,3 +7,10 @@ export const settingWrapper = style({
   minWidth: '150px',
   maxWidth: '250px',
 });
+
+export const pluginItem = style({
+  borderBottom: '1px solid var(--affine-border-color)',
+  transition: '0.3s',
+  padding: '24px 8px',
+  fontSize: 'var(--affine-font-sm)',
+});

plugins/copilot/src/UI/debug-content.tsx

@@ -11,6 +11,8 @@ export const DebugContent = (): ReactElement => {
     <div>
       <FlexWrapper justifyContent="space-between">
         <Input
+          width={280}
+          height={32}
           defaultValue={key ?? undefined}
           onChange={useCallback(
             (newValue: string) => {
@@ -18,6 +20,7 @@ export const DebugContent = (): ReactElement => {
             },
             [setKey]
           )}
+          placeholder="Enter your API_KEY here"
         />
         <Button
           size="large"