dify前端web二次开发

需求：dify实现了快速搭建聊天智能体，但是用户要求改变聊天框的风格、图片等

1、用户不喜欢聊天小机器人右下角的图标，可以直接修改嵌入代码中引用的js……把原来的js复制出来放在自己应用的路径下，可以随便修改最外层的图标等。同样，对话框的大小也可以直接在这个嵌入代码里修改。

<script
 src="embed.min.js"   可以修改成自己的js
 id="6r1iiAiJOTXGdSk2"
 defer>
</script>
<style>
  #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
  }

2、用户也要求修改对话框中的风格，对话框上方的标题等，这个就需要web的二次开发

（1）下载源码，修改web下的代码

（2）重新生成docker的镜像文件：因为docker默认的是云上直接拉取的镜像，所以不重新build成自己修改后的web镜像是没用的。

     1、docker文件夹下的docker-compose.yaml 文件，修改web下的指向，可以起个自己的web名字“myweb”，方便在docker中查看是否加载的镜像是自己的了：

2、修改web下的Dockerfile，把默认注释的两行镜像放开，也可以改成能用的镜像，不然build的时候会拉取依赖很久很久也不成功。

3、如果已经在docker中运行，就先停了，再build

# 停止现有容器
docker compose down


# 重新构建并启动
docker compose up -d --build

踩过的坑：

build时间巨长，报了大量的错误，各种依赖找不到。最终还是更改镜像站后才快速拉取。

另外本机的node版本是22，dify是18+，但是也报了莫名其妙的错误，文件不兼容等等，最后还是重装了node18，就很顺利了……

——————————————————

补充：

在本地编译web成功后，需要把新编译好的镜像从本地传到服务器，由服务器加载。

1、本地，如果只需要对web进行操作：

停web镜像：docker-compose down web
编译web：docker-compose build web
启动web：docker-compose up -d web

确认本地功能没有问题。

2、将新的web镜像下载

（1）看看镜像名：docker images  （myweb:latest ）

（2）另存下来：docker save -o myweb_images.tar myweb:latest  

tar文件会另存在当前docker黑窗口启动的路径下，比如我在dify的docker文件夹下启动的，他就另存在这个文件夹下。

3、复制到远程服务器上，也放在docker文件夹下

注意：远程服务器上的docker-compose.yaml 文件也要改一下！和本地改的一样就行，尤其是改过名字的（myweb）的，一定要也改成myweb，不然它不认识……

然后停web：docker-compose down web

删掉旧的myweb镜像（我直接在dockerdesk的image菜单里点的删除，不然会报同名已存在）

加载新镜像 ： docker load -i myweb_images.tar
启动web：docker-compose up -d web

更新完毕。