next-admin支持AI問答模塊，完全開源！

最近對(duì)這個(gè)項(xiàng)目做了一些優(yōu)化，并集成了大家比較關(guān)注的AI問答模塊，感興趣的可以參考一下。

• 開源地址：https://github.com/MrXujiang/next-admin
• 在線demo：http://next-admin.com

目前已支持的功能模塊有：

• Next14.0 + antd5.0
• 支持國(guó)際化
• 支持主題切換
• 內(nèi)置數(shù)據(jù)可視化報(bào)表
• 內(nèi)置拖拽模塊（多選，參考線，吸附等核心搭建能力）
• 內(nèi)置AI問答模塊
• 開箱即用的業(yè)務(wù)頁(yè)面模板
• 支持自定義拖拽看板
• 集成辦公白板
• Next全棧最佳實(shí)踐
• 支持移動(dòng)端和PC端自適應(yīng)
• 內(nèi)置簡(jiǎn)單的JWT處理邏輯

往期精彩

• 零代碼+AI的階段性復(fù)盤
• 文檔引擎+AI可視化打造下一代文檔編輯器
• 爆肝1000小時(shí), Dooring零代碼搭建平臺(tái)3.5正式上線
• 從零打造一款基于Nextjs+antd5.0的中后臺(tái)管理系統(tǒng)

demo演示

深色模式：

技術(shù)實(shí)現(xiàn)

問答模塊目前已有比較成熟的組件，這里我選擇 antd 旗下的 @ant-design/pro-chat,  這個(gè)組件我之前也有具體的分享，大家可以可以參考我往期的內(nèi)容。

接下來(lái)直接上代碼：

<ProChat
    className={styles.chatWrap}
    helloMessage={
      <div className={styles.helloBox}>
        <div>
          hello, 歡迎體驗(yàn) <strong>Nocode/WEP</strong> 文檔引擎，我是你的AI智能助手，
          有任何問題都可以和我提問，如果對(duì)產(chǎn)品有技術(shù)上或者體驗(yàn)上的問題，
          歡迎關(guān)注 <Popover content={content}>
                    <span className={styles.btn}>趣談前端</span>
                  </Popover> 
          公眾號(hào) 和作者反饋~
        </div>
      </div>
    }
    actions={{
        render: (defaultDoms) => {
          return [
            <a
              key="h5"
              onClick={() => {
                window.open('https://dooring.vip');
              }}
            >
              H5-Dooring零代碼平臺(tái)
            </a>,
            <a
                key="v6"
                onClick={() => {
                    window.open('https://turntip.cn/');
                }}
            >
                試卷搭建平臺(tái)
            </a>,
            ...defaultDoms,
          ];
        },
        flexConfig: {
          gap: 24,
          direction: 'horizontal',
          justify: 'start',
        },
    }}
    showTitle
    assistantMeta={{ avatar: '??', title: 'Nocode/WEP 智能助手' }}
    userMeta={{
      avatar: userInfo.avatar || '用戶',
      title: '用戶' + Date.now(),
    }}
    request={async (messages: any) => {
        console.log('messages', messages);
        // 后端處理能邏輯
        return new Response(readableStream);
      }}
  />

如果大家想?yún)⒖纪瓿纱a， 可以在 github 查看。

后期規(guī)劃

后續(xù)會(huì)在 Next-Admin 中集成更多最佳實(shí)踐，也歡迎感興趣的朋友一起交流討論。

如果你對(duì) next 開發(fā)或者需要開發(fā)一套管理系統(tǒng)， 我相信 Next-Admin 會(huì)給你開發(fā)和學(xué)習(xí)的靈感。

同時(shí)也歡迎和我一起貢獻(xiàn)， 讓它變得更優(yōu)秀~

github地址：https://github.com/MrXujiang/next-admin

演示地址：http://next-admin.com

由于服務(wù)器在國(guó)外， 所以建議大家git到本地體驗(yàn)~

歡迎star + 反饋~