hunk.code_window:   fontWeight: '600',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     height: '22px',
     marginLeft: '10px',
     marginRight: '10px',
   });
   export const popperStyle = style({
     boxShadow: 'var(--affine-shadow-2)',
     padding: '0 10px',
  
hunk.labels: keep keep keep keep keep replace replace keep keep keep keep
hunk.after_edit:   textAlign: 'center',
     ':hover': {
       background: 'var(--affine-hover-color)',
       borderRadius: '4px',
     },
  
hunk.file_path: packages/component/src/components/date-picker/index.css.ts
hunk.type: replace
file: import { Button, Input } from '@affine/component';
  import { rootStore } from '@toeverything/plugin-infra/manager';
  import type { PluginUIAdapter } from '@toeverything/plugin-infra/type';
  import { Provider, useAtomValue, useSetAtom } from 'jotai';
  import type { ReactElement } from 'react';
  import { StrictMode, Suspense, useCallback, useState } from 'react';
  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,
    inputStyle,
    sendButtonStyle,
  } from './index.css';
  
  if (typeof window === 'undefined') {
    import('@blocksuite/blocks')
      .then(({ FormatQuickBar }) => {
        FormatQuickBar.customElements.push((_page, getSelection) => {
          const div = document.createElement('div');
          const root = createRoot(div);
  
          const AskAI = (): ReactElement => {
            const { conversationAtom } = useChatAtoms();
            const call = useSetAtom(conversationAtom);
            const onClickAskAI = useCallback(() => {
              const selection = getSelection();
              if (selection != null) {
                const text = selection.models
                  .map(model => {
                    return model.text?.toString();
                  })
                  .filter((v): v is string => Boolean(v))
                  .join('\n');
                console.log('selected text:', text);
                call(
                  `I selected some text from the document: \n"${text}."`
                ).catch(err => {
                  console.error(err);
                });
              }
            }, [call]);
  
            return <div onClick={onClickAskAI}>Ask AI</div>;
          };
          root.render(
            <StrictMode>
              <Provider store={rootStore}>
                <AskAI />
              </Provider>
            </StrictMode>
          );
          return div;
        });
      })
      .catch(error => {
        console.error(error);
      });
  }
  
  const Actions = () => {
    const { conversationAtom, followingUpAtoms } = useChatAtoms();
    const call = useSetAtom(conversationAtom);
    const questions = useAtomValue(followingUpAtoms.questionsAtom);
    const generateFollowingUp = useSetAtom(followingUpAtoms.generateChatAtom);
    const [input, setInput] = useState('');
    return (
      <>
        <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();
            }, [call, generateFollowingUp, input])}
          >
            send
          </Button>
        </div>
      </>
    );
  };
  
  const DetailContentImpl = () => {
    const { conversationAtom } = useChatAtoms();
    const conversations = useAtomValue(conversationAtom);
  
    return (
      <div className={detailContentStyle}>
        <ConversationList conversations={conversations} />
        <Suspense fallback="generating follow-up question">
          <Actions />
        </Suspense>
      </div>
    );
  };
  
  export const DetailContent: PluginUIAdapter['detailContent'] = ({
    contentLayoutAtom,
  }): ReactElement => {
    const layout = useAtomValue(contentLayoutAtom);
    const key = useAtomValue(openAIApiKeyAtom);
    if (layout === 'editor' || layout.second !== 'com.affine.copilot') {
      return <></>;
    }
    if (!key) {
      return <span>Please set OpenAI API Key in the debug panel.</span>;
    }
    return <DetailContentImpl />;
  };
  