setMessage(v)} className='scrollbar' style={{ minHeight: 180 }} placeholder='message' />
      <div className='px-4'>
        <Button type='primary' className='mt-4' onClick={onClick}>
          发送
        </Button>
      </div>
    </div>
  );
};
type FormModalProps = {
  send?: any;
};
const FormModal = (props: FormModalProps) => {
  const [form] = Form.useForm();
  const aiStore = useAiStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        setFormData: state.setFormData,
        setMessage: state.setMessage,
      };
    }),
  );
  useEffect(() => {
    const open = aiStore.showEdit;
    if (open) {
      const isNull = isObjectNull(aiStore.formData);
      if (isNull) {
        form.setFieldsValue({});
      } else form.setFieldsValue(aiStore.formData);
    }
  }, [aiStore.showEdit]);
  const onFinish = async (values: any) => {
    props.send({
      type: 'changeSession',
      data: {
        id: testId,
      },
    });
    aiStore.setMessage([]);
  };
  const onClose = () => {
    aiStore.setShowEdit(false);
    aiStore.setFormData({});
    form.resetFields();
  };
  const isEdit = aiStore.formData.id;
  return (
    <Modal
      title={isEdit ? 'Edit' : 'Add'}
      open={aiStore.showEdit}
      onClose={() => aiStore.setShowEdit(false)}
      destroyOnClose
      footer={false}
      width={800}
      onCancel={onClose}>
      <Form
        form={form}
        onFinish={onFinish}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}>
        <Form.Item name='id' hidden>
          <Input />
        </Form.Item>
        <Form.Item name='sessionId' label='sessionId'>
          <Input />
        </Form.Item>
        <Form.Item label=' ' colon={false}>
          <Button type='primary' htmlType='submit'>
            Submit
          </Button>
          <Button className='ml-2' htmlType='reset' onClick={onClose}>
            Cancel
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export const useListenQuery = () => {
  const aiStore = useAiStore(
    useShallow((state) => {
      return {
        open: state.open,
        key: state.key,
        onMessage: state.onMessage,
      };
    }),
  );
  // TODO: Implement useEffect
  useEffect(() => {
    if (!aiStore.open) {
      return;
    }
    const open = aiStore.open;
    send({
      type: 'subscribe',
      token: query.getToken(),
      data: {
        key: aiStore.key,
      },
    });
    const close = query.qws.onMessage(onMessage, {
      selector: (data) => {
        const requestId = data.requestId;
        return {
          requestId,
          ...data.data,
        };
      },
    });
    return () => {
      send({ type: 'unsubscribe' });
      close();
    };
  }, [aiStore.open, query]);
  const send = async (data: any) => {
    query.qws.send(data, {
      wrapper: (data) => ({
        requestId: nanoid(16),
        type: 'chat',
        data: data,
      }),
    });
  };
  const onMessage = (data: any) => {
    type MessageData = {
      chatId: string;
      chatPromptId: string;
      role: string;
      root: boolean;
      show: boolean;
      data: {
        message: string;
      };
    };
    if (data.code === 200 && data.type === 'messages') {
      const messageData = data.data as MessageData;
      aiStore.onMessage(messageData);
    }
  };
  return {
    send,
  };
};

export const AiMoudle = () => {
  const [form] = Form.useForm();
  const navigate = useNewNavigate();
  const aiStore = useAiStore(
    useShallow((state) => {
      return {
        open: state.open,
        setOpen: state.setOpen,
        formData: state.formData,
        setFormData: state.setFormData,
        messages: state.messages,
        setMessages: state.setMessage,
        key: state.key,
        root: state.root,
        setRoot: state.setRoot,
        title: state.title,
        setShowEdit: state.setShowEdit,
        list: state.list,
        getList: state.getList,
      };
    }),
  );
  const [noPrompt, setNoPrompt] = useState(false);
  const [currentPage, setCurrentPage] = useState('');
  const location = useLocation();
  useEffect(() => {
    if (!aiStore.open) {
      return;
    }
    const isNull = JSON.stringify(aiStore.formData) === '{}';
    if (!isNull) {
      form.setFieldsValue(aiStore.formData);
    } else {
      form.setFieldsValue({ inputs: [] });
    }
  }, [aiStore.open, aiStore.formData]);
  useEffect(() => {
    if (!aiStore.open) {
      aiStore.setMessages([]);
    } else {
      aiStore.getList();
    }
  }, [aiStore.open]);
  const { send } = useListenQuery();
  useLayoutEffect(() => {
    if (aiStore.open) {
      aiStore.setOpen(false);
    }
  }, [location.pathname]);

const onSend = () => {
    const data = form.getFieldsValue();
    send({ type: 'messages', data: { ...data, root: true } });
  };
  const onSendNoPrompt = (value) => {
    send({ type: 'messages', data: { message: value, root: true } });
  };

const inputs = useMemo(() => {
    if (!aiStore.open) return [];
    const inputs = aiStore.formData?.inputs || [];
    return inputs;
  }, [aiStore.open, aiStore.formData]);
  const isNotShow = inputs?.length === 0 || !inputs;
  const OnlyNormalMessage = (
    <Tooltip title='不需要任何预设prompt'>
      <div
        className='text-blue-500 text-xs mt-2 italic cursor-pointer'
        onClick={() => {
          setNoPrompt(true);
        }}>
        直接发送消息
      </div>
    </Tooltip>
  );
  const NeedPromptMessage = (
    <Tooltip title='需要预设prompt'>
      <div
        className='text-blue-500 text-xs mt-2 italic cursor-pointer'
        onClick={() => {
          setNoPrompt(false);
        }}>
        需要预设prompt
      </div>
    </Tooltip>
  );
  const RootForm = (
    <div className='flex flex-col relative'>
      <div className={clsx('flex flex-col absolute top-3 w-full', isNotShow && 'invisible', noPrompt && 'invisible')}>
        <div className='mt-1 ml-2'>在当前页面，我能帮助你什么吗? {OnlyNormalMessage}</div>
        <div className='mt-4'>
          <Form form={form}>
            <Form.List name={'inputs'} initialValue={[]}>
              {(fields, { add, remove }) => {
                return (
                  <>
                    {fields.map((field, index) => {
                      const key = form.getFieldValue(['inputs', index, 'key']);
                      const isTitle = key === 'title';
                      return (
                        <div key={field.name + '-' + index} className=''>
                          <Form.Item name={[field.name, 'key']} rules={[{ required: true, message: 'Missing name' }]} hidden noStyle>
                            <Input placeholder='name' />
                          </Form.Item>
                          <Form.Item className='!mb-0' name={[field.name, 'value']} rules={[{ required: true, message: 'Missing value' }]}>
                            <TextArea className='scrollbar' style={{ minHeight: isTitle ? 18 : 180 }} placeholder={key} />
                          </Form.Item>
                        </div>
                      );
                    })}
                  </>
                );
              }}
            </Form.List>
          </Form>
          <div className='px-4'>
            <Button type='primary' className='mt-4' onClick={onSend}>
              发送
            </Button>
          </div>
        </div>
      </div>
      {isNotShow && !noPrompt && (
        <div className='flex flex-col absolute top-3'>
          <div className='mt-2 text-gray-400 flex '>
            当前页面没有配置，点击
            <div
              className='text-blue-500 cursor-pointer'
              onClick={(e) => {
                navigate('/chat/chat-prompt/list');
              }}>
              去配置
            </div>
          </div>
          <div>{OnlyNormalMessage}</div>
        </div>
      )}
      {noPrompt && (
        <div className=''>
          {NeedPromptMessage}
          <NormalMessage onSend={onSendNoPrompt} />
        </div>
      )}
    </div>
  );

const ChatForm = (
    <ChatMessage
      messages={aiStore.messages}
      onSend={(value) => {
        send({ type: 'messages', data: { message: value } });
      }}
    />
  );
  const items = aiStore.list.map((item) => {
    return {
      key: item.id,
      label: item.title || item.id,
      onClick: () => {
        // aiStore.setKey(item.id);
        // 选中具体的
        send({
          type: 'changeSession',
          data: {
            id: item.id,
          },
        });
        aiStore.setMessages([]);
      },
    };
  });
  return (
    <div className={clsx('w-full h-full flex-shrink-0 bg-gray-100 border-l-2 shadow-lg flex flex-col', !aiStore?.open && 'hidden')}>
      <div className='flex justify-between  p-2 border bg-white'>
        <div className='flex gap-4'>
          <Button className='position ml-4 ' onClick={() => aiStore.setOpen(false)} icon={<CloseOutlined />}></Button>
          <h1 className=''>{aiStore.title || 'Ai Module'}</h1>
        </div>
        <div className='mr-4 flex'>
          {!aiStore.root && (
            <Button
              className='mr-2'
              onClick={() => {
                aiStore.setMessages([]);
                aiStore.setRoot(true);
                send({
                  type: 'changeSession',
                  data: {
                    id: null,
                  },
                });
              }}
              icon={<PlusOutlined />}></Button>
          )}
          <Dropdown
            className='mr-2'
            placement='bottomRight'
            menu={{
              items,
            }}>
            <Button className='' icon={<HistoryOutlined />}></Button>
          </Dropdown>
          {/* <Tooltip title='历史会话'>
            <Button
              className=''
              onClick={() => {
                aiStore.setShowEdit(true);
              }}
              icon={<HistoryOutlined />}></Button>
          </Tooltip> */}
        </div>
      </div>
      <div className='flex-grow p-2 overflow-hidden h-full flex flex-col'>{aiStore.root ? RootForm : ChatForm}</div>
      <FormModal send={send} />
    </div>
  );
};