React项目中 “引入coze AI 应用开发平台“ 的具体代码实现

蓉妹妹

已于 2024-10-31 09:43:25 修改

阅读量712

点赞数 4

文章标签： react.js javascript

于 2024-10-30 17:35:42 首次发布

本文链接：https://blog.csdn.net/weixin_43517190/article/details/143369934

版权

Coze扣子：新一代 AI 应用开发平台
官网链接：https://www.coze.cn/docs/developer_guides/web_sdk

项目中要引入它，效果如下
在这里插入图片描述

废话不多说上代码

首先建一个html文件，因为要引入官方js，至于位置就看你们的项目怎么放方便吧，我是放在了项目的public文件下

<!doctype html>
<html lang="en">
<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/0.1.0-beta.7/libs/cn/index.js"></script>
<body>
<div class="coze-div">
    <div id="position_demo"></div>
</div>
<script>
    new CozeWebSDK.WebChatClient({
        config: {
            bot_id: '',
        },
        componentProps: {
            title: '助手',
            lang: 'zh-CN',
            width: 460,
            layout: 'pc'
        },
        el: document.getElementById('position_demo'),
    });
</script>
</body>
</html>

注意！！！，这里最主要的就是替换script引入路径和bot_id,
当你官网注册开通的时候他们会提供对应的值，此处我就设置空了😄

2.我们是React项目，那怎么引入它呢，那当然是用iframe啦
很精简的代码是：

import React, { PureComponent } from 'react';
export class Coze extends PureComponent<unknown, unknown> {

    render() {
        return (
            <iframe
                title="coze"
                className="iframe"
                src="coze.html"
            />
        );
    }
}

以上代码你会发现图标出来了，但是点击Ai图标，出现界面，却没展示全
在这里插入图片描述
此时你可以给iframe一个固定的数值大点的宽高，它就展示出来了

3.如果想做到我这种效果，那么需要添加一个控制样式的事件
开发过程中遇到三个问题
1.它必定是一个fixed的定位，一些页面有z-index的布局会遮住它，所以它必须设置z-index高一点，居于其它之上
2. 点击AI图标后，界面要占满左侧，但是官网是会随着图标定位，所以需要自己设置。
3. 不能一开始给iframe固定的宽高，不然会遮挡住页面其它地方不可点击了

为了解决以上问题，不得不监听对方点击AI界面前后的页面样式调整
一开始是在html文件中控制，试图更改官网样式，后来发现解决不了，还是得控制iframe
但是给iframe外侧的dev加onclick事件，发现点击Ai界面怎么都不触发，估计对方有阻止冒泡事件的处理吧

最后找到一种方法！！：iframe渲染完成后对它里面的渲染id做事件监听

以下是解决代码，希望对大家有帮助～

import React, { CSSProperties, PureComponent } from 'react';
import './index.less';

interface States {
    cozeOpen: boolean;
}
export class Coze extends PureComponent<unknown, States> {
    constructor(props: any) {
        super(props);
        this.state = {
            cozeOpen: false,
        };
    }
    iframe: any;
    componentDidMount() {
        // 确保iframe加载完成
        this.iframe.onload = () => {
            const iframeWindow = this.iframe.contentWindow;
            iframeWindow.document
                .getElementById('position_demo')
                .addEventListener('click', this.handleClick);
        };
    }

    handleClick = () => {
        const { cozeOpen } = this.state;
        this.setState({
            cozeOpen: !cozeOpen,
        });
    };

    render() {
        const { cozeOpen } = this.state;
        const tabBarHeight = 50;
        const heigth = window.innerHeight + tabBarHeight;
        const style: CSSProperties = cozeOpen
            ? {
                  top: '-19px',
                  right: '-19px',
                  width: '500px',
                  height: heigth,
              }
            : {
                  bottom: '100px',
                  width: '56px',
                  height: '56px',
              };
        const iframeStyle = cozeOpen
            ? {
                  width: '500px',
                  height: heigth,
              }
            : undefined;
        return (
            <div className="coze" style={style}>
                <iframe
                    title="coze"
                    ref={(ref) => {
                        this.iframe = ref;
                    }}
                    className="iframe"
                    style={iframeStyle}
                    src="coze.html"
                />
            </div>
        );
    }
}

index.less

.coze{
  position: fixed;
  right: 0;
  z-index: 99999;
  iframe{
    border: none;
  }
}