React 환경에 Dify 챗봇 임베디드하기 (ft. 컴포넌트로 만들기)

오늘은 Reactjs 환경에서 Dify 챗봇을 임베디드 하는 방법을 적어보겠다!

나중에 기회가 되면 Dify 챗봇 만드는 방법도 올려볼까 한다.

 

일단 내가 원했던건 로그인 후 Dify 챗봇이 나오고, 챗봇에는 로그인한 사용자 정보가 전달되길 바랬다.

(유동적으로 연동되야했다)

 

그래서 Dify 공식에서 알려준 방식을 활용해 컴포넌트화 했다.

Dify 공식에서는 iframe 방식과 javascript 방식을 알려주는데,

javascript을 index.html에 넣으면 유동적으로 사용자 정보를 못 갖고 오기 때문에, javascript 소스를 참고해서 조금 변형을 해줬다.

 

소스는 간단하다. 나는 DifyChatbot이란 이름으로 컴포넌트를 정의해줬고, 로그인 후 메인 페이지에 컴포넌트를 선언해줬다.

import {useEffect} from 'react'

function DifyChatbot({userId}) {
  useEffect(() => {
    window.difyChatbotConfig = {
      token: <chatbot token>,
      baseUrl: <dify url>,
      authorization: 'Bearer app-***',
      systemVariables: {
        user_id: userId
      },
      dynamicScript: true,
    }

    const script = document.createElement('script')
    script.src = '<dify url>/embed.min.js'
    script.id = '<token>'
    script.defer = true
    script.async = true

    document.body.appendChild(script)

    return () => {}
  }, [])

  return null
}

export default DifyChatbot

 

소스 코드에서 중요한 부분은 dynamicScript: true로 해줘야 react와 같이 번들링 되는 시스템에서 스크립트가 동작된다.

왜냐하면 비밀은 embed.min.js 파일을 보면 알수 있다.

embed.min.js 파일 가장 하단에 보면 아래와 같은 구문이 있다.

여기서 y는 내가 정의한 difyChatbotConfig이고, e 함수는 챗봇 임베디드 소스 생성 기능이다.

기본적으로 body onload 상태가 되면 e 함수를 실행하는데,

react, vue과 같은 spa 환경은 onload 후에 동적으로 script가 생성되기 때문에 타이밍 문제가 발생한다. 

즉, 이미 onload가 실행된 후에 embed.min.js가 실행되기 때문에 onload 이벤트가 실행되지 않는다. 

그래서 e 함수를 바로 호출하도록 되어 있다.

우리는 config에 dynamicScript만 true로 해주면 된다.

y?.dynamicScript ? e() : (document.body.onload = e)

 

 

두번째로 내가 꽤 오래 시간을 쓴 문제가 있었는데, 실수로 아래와 같이 했었다.

화면을 벗어날때 스크립트를 삭제해야겠다는 생각에 return에 window.difyChatbotConfig을 삭제해줬는데,

window는 레퍼런스로 연결되어 있기 때문에 첫 화면에서부터 챗봇에서 에러가 났다.

Dify env을 잘못 설정한 줄 알았는데, 알고보니 difyChatbotConfig을 delete해서 발생한 문제였다.

return 부분에 구문을 삭제해주니 정상적으로 화면에 나왔다. 

import {useEffect} from 'react'

function DifyChatbot({userId}) {
  useEffect(() => {
    window.difyChatbotConfig = {
      token: <chatbot token>,
      baseUrl: <dify url>,
      authorization: 'Bearer app-***',
      systemVariables: {
        user_id: userId
      },
      dynamicScript: true,
    }

    const script = document.createElement('script')
    script.src = '<dify url>/embed.min.js'
    script.id = '<token>'
    script.defer = true
    script.async = true

    document.body.appendChild(script)

    return () => {
      const existing = document.getElementById('<token>')
      if (existing) existing.remove()
      delete window.difyChatbotConfig
    }
  }, [])

  return null
}

export default DifyChatbot

 

 

아직 해결되지 않는 부분도 있다.

사용자별로 conversation_id을 다르게 호출해서, 챗봇 이력이 다른 사용자들에게 공유되지 않아야되고, 내가 질문했던 대화 이력이 남아야되는데, conversation_id은 자동 생성되는 값이라 챗봇으로 한번이라도 질문을 해야 알수 있다는 점이다.

이 값을 추출하는 방법은 아직 연구중이다!

 

자료가 별로 없어서 넘 어렵다😬