Как сохранять диалог react-chatbot-kit?

Question

[KateSin]

Привет
Для приложения на django/react делаю чат-бот с помощью react-chatbot-kit, и столкнулась с проблемой: совершенно не понятно, как сохранять диалог с ботом, чтоб при повторном его подключении он был виден.
https://fredrikoseberg.github.io/react-chatbot-kit... - вот что есть в документации, но это совершенно не работает. И сколько ни искала, примеров таких чат-ботов, у которых сохранялся бы диалог, не нашла.

Дополнение:
Заметила, что не срабатывает именно saveMessages. Если вызывать его принудительно, возникает уже ошибка при срабатывании loadMessages()

также в комментариях добавила код основных элементов

Comments

[Ne7Le4Der]

Для того чтобы сказать что не работает - нужен код. В документации рабочий пример => у вас не правильная реализация. Сказать что вы сделали не так без кода невозможно

[KateSin]

Дополнение - непосредственно код в основных компонентах

// Bot.js - в итоге импортирован в App.js приложения и использован внутри return() в виде ''

export const Bot = () => {

    const [isBotOpen, setIsBotOpen] = useState(false)

    const handleOpenBot = () => {
        if (isBotOpen === false) {
            setIsBotOpen(true)
        } else if (isBotOpen === true) {
            setIsBotOpen(false)
        }
    }

    const saveMessages = (messages, HTMLString) => {
        localStorage.setItem('chat_messages', JSON.stringify(messages))
    }

    const loadMessages = () => {
        if (localStorage.getItem('chat_messages')) {
            const messages = JSON.parse(localStorage.getItem('chat_messages'))
            console.log(messages)
            return messages
        }
    }

    return (
        <div className='appChatbotContainer' >
            <button onClick={handleOpenBot} className='appChatbotButton' label='bot'>
                <CoBotAvatar/>
            </button>
            {
                (isBotOpen === true) && (
                    <Chatbot
                        config={config}
                        actionProvider={ActionProvider}
                        messageHistory={loadMessages()}
                        messageParser={MessageParser}
                        saveMessages={saveMessages}
                    />
                )
            }
        </div>
    )
}

// ActionProvider.js

export const ActionProvider = ({createChatBotMessage, setState, children, rest}) => {
  const [content, setContent] = useState([])
  useEffect(() => {
    axios({
        method: "POST",
        url: window.location.origin+'/api/botanswers/',
        headers:
                {
                    Authorization: localStorage.getItem('access_token'),
                    Group: localStorage.getItem('detailRole')
                },
    }).then(response => {
        setContent(JSON.parse(response.data))
        console.log(JSON.parse(response.data))
    }).catch(error => {
        console.log('Error: ', error)
    })
  }, [])
  const greet = () => {
    const greetingMessage = this.createChatBotMessage("и тебе привет!")
    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, greetingMessage],
    }));
  }
  const notUnderstand = () => {
    const notUnderstandMessage = createChatBotMessage('Извини, я не понимаю')
    setState((prev) => ({
      ...prev, messages: [...prev.messages, notUnderstandMessage],
    }))
  }

  const hiGreet = () => {
    const hiGreetingMessage = createChatBotMessage('о, вы англичанин? hello!')
    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, hiGreetingMessage],
    }));
  }

  const handleQuestion = () => {
    const message = createChatBotMessage(
      "Выберите раздел, с которым связан ваш вопрос",
      {
        widget: "questionSections",
      }
    )
    setState((prev) => ({
      ...prev,
      messages: [...prev.messages, message],
    }));
  }
  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          actions: {
            greet,
            hiGreet,
            notUnderstand,
            handleQuestion,
          },
        });
      })}
    </div>
  )
}

// MessageParser.js

export const MessageParser = ({actions, children}) => {

  const parse = (message) => {
    const lowerCaseMessage = message.toLowerCase()
    if (lowerCaseMessage.includes("привет")) {
      actions.greet();
    }
    else if (
        lowerCaseMessage.includes('hi') ||
        lowerCaseMessage.includes('hello')
       ) {
      actions.hiGreet();
    }
    else if (lowerCaseMessage.includes("вопрос")) {
      actions.handleQuestion();
    }
    else {
      actions.notUnderstand();
    }
  }

  return (
    <div>
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, {
          parse: parse,
          actions,
        });
      })}
    </div>
  );
}

// config.js

const config = {
    initialMessages: [
        createChatBotMessage("Привет! Я чат-бот Личного кабинета Заказчика. Чем я могу помочь?", {
            widget: "sectionSelection",
        }),
    ],
    customComponents: {
        botAvatar: (props) => <CoBotAvatar {...props} />,
        header: () => <div style={{ backgroundColor: '#2898ec', padding: '5px', font: 'revert', borderRadius: '5px' }}>
                        Ваш помощник в ЛК
                      </div>
    },
    customStyles: {
        botMessageBox: {
          backgroundColor: "#376B7E",
        },
        chatButton: {
          backgroundColor: "#376B7E",
        },
    },
    widgets: [
     {
     	widgetName: "sectionSelection",
     	widgetFunc: (props) => <SectionSelection {...props} />,
     },
     {
     	widgetName: "questionSections",
     	widgetFunc: (props) => <QuestionSections {...props} />,
     },
  ],
}

export default config

[KateSin]

Ne7Le4Der, спасибо за подсказку, дополнила в комментариях

Answer 1

[KateSin]

Ок, сама спросила, сама же ответила, вдруг кому понадобится.

В actionProvider.js необходимо добавить функцию saver, которая будет сохранять message при вызове в функциях, формирующих сообщения бота (при вызове передаем объект, сформированный вызовом createChatbotMessage):

const saver = (message) => {
        if (localStorage.getItem('chat_messages')){
            console.log('SAVE BOT')
            const chat_messages = JSON.parse(localStorage.getItem('chat_messages'));
            console.log(chat_messages.history)
            chat_messages.history.push({id: message.id, message: message.message, type: message.type, loading: message.loading, widget: message.widget})
            localStorage.setItem('chat_messages', JSON.stringify(chat_messages))
        } else {
            console.log('ELSE SAVE BOT')
            var obj = {}
            obj.history = [{id: message.id, message: message.message, type: message.type, loading: message.loading, widget: message.widget}]
            localStorage.setItem('chat_messages', JSON.stringify(obj))
        }
    }

Также прописываем в messageParser.js в функции parse сохранение сообщения пользователя:

if (localStorage.getItem('chat_messages')){
            const chat_messages = JSON.parse(localStorage.getItem('chat_messages'));
            console.log(chat_messages.history)
            chat_messages.history.push({message: message, type: 'user', loading: false})
            localStorage.setItem('chat_messages', JSON.stringify(chat_messages))
        } else {
            var obj = {}
            obj.history = [{message: message, type: 'user', loading: false}]
            localStorage.setItem('chat_messages', JSON.stringify(obj))
        }

в файле bot.js убираем функцию saveMessages (все равно она не срабатывает) и видоизменяем функцию loadMessages:

const loadMessages = () => {
        if (localStorage.getItem('chat_messages')) {
            const messages = JSON.parse(localStorage.getItem('chat_messages'))
            return messages.history
        }
    }