How to check and fix that the answer from the bot in properly in JSON?

[Elindo586]

The answer from the AI goes here:

const stringResult = JSON.stringify(result.text);

const parseResult = JSON.parse(stringResult);

^^ How can I fix this answer to be properly accepted as a JSON?

Full backend code here:

import { OpenAI } from "langchain/llms/openai";

import { TextLoader } from "langchain/document_loaders/fs/text";
import { CharacterTextSplitter } from "langchain/text_splitter";
import { OpenAIEmbeddings } from "langchain/embeddings/openai";
import { RetrievalQAChain, loadQAStuffChain } from "langchain/chains";
import { FaissStore } from "langchain/vectorstores/faiss";

let loader;
let docs;
let splitter;
let documents;
let embeddings1;
let vectorstore;

let model;

let embeddings;
let vectoreStore;

let chain;
let result;

const useStore4 = async (req, res) => {
  if (req.method === "POST") {
    loader = new TextLoader("./documents/restaurant.txt");
    docs = await loader.load();
    splitter = new CharacterTextSplitter({
      chunkSize: 200,
      chunkOverlap: 50,
    });
    documents = await splitter.splitDocuments(docs);
    embeddings1 = new OpenAIEmbeddings();
    vectorstore = await FaissStore.fromDocuments(documents, embeddings1);
    await vectorstore.save("./");

    const message = req.body.newText;
    const firstOne = req.body.firstMsg;

    console.log(message);
    if (firstOne) {
      model = new OpenAI({
        modelName: "gpt-4",
        openAIApiKey: process.env.OPENAI_API_KEY,
        temperature: 0,
      });

      embeddings = new OpenAIEmbeddings();
      vectoreStore = await FaissStore.load("./", embeddings);

      chain = new RetrievalQAChain({
        combineDocumentsChain: loadQAStuffChain(model),
        retriever: vectoreStore.asRetriever(),
        returnSourceDocuments: true,
      });
    }

    result = await chain.call({
      query: message,
    });

    const stringResult = JSON.stringify(result.text);
    const parseResult = JSON.parse(stringResult);

    console.log(parseResult);

    return res.status(200).json(parseResult);
  } else {
    res.status(405).json({ say: "Only POST is allowed" });
  }
};
export default useStore4;

Full frontend code here:

"use client";

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { store } from "./store";
import Link from "next/link";
import Image from "next/image";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

import { v4 as uuid } from "uuid";
import {
  addMessage,
  addBotMessage,
  setSelectedConversationId,
  setConversationHistory,
  setConversations,
  deleteConversations,
} from "./dashboard-slice";

const MessageInput = () => {
  const [text, setText] = useState("");
  const [ui, setUi] = useState(false);
  const [firstMsg, setFirstMsg] = useState(true);

  // get session history

  // const sessionId = localStorage.getItem("sessionId");

  // socket.on("session-details", (data) => {
  //   const { sessionId, conversations } = data;

  // (data) => {
  //   const { sessionId, conversations } = data;
  //   localStorage.setItem("sessionId", sessionId);
  //   store.dispatch(setConversations(conversations));
  // };

  const dispatch = useDispatch();

  const selectedConversationId = useSelector(
    (state) => state.dashboard.selectedConversationId
  );

  useEffect(() => {
    if (ui) {
      dispatch(deleteConversations());
      document.getElementById("chat-container-id").style.display = "none";
      document.getElementById("chat-button-id").style.display = "block";
      setUi(false);
    }
  }, [ui, dispatch]);

  const proceedMessage = async () => {
    const message = {
      aiMessage: false,
      text,
      id: uuid(),
      animate: false,
    };
    console.log(message);
    const newText = JSON.stringify(message.text);
    console.log(newText);

    const conversationId =
      selectedConversationId === null ? uuid() : selectedConversationId;

    // append to local store
    dispatch(
      addMessage({
        conversationId,
        message,
      })
    );
    dispatch(setSelectedConversationId(conversationId));

    // send to server

    let data = {
      newText,
      firstMsg,
    };

    console.log(data);
    const response = await fetch("/api/usestore4", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    // reset value of input
    setText("");
    setFirstMsg(false);

    try {
      const searchRes = await response.json();
      console.log(searchRes.text);
    } catch (err) {
      console.log("Error parsing", err);
    }

    const botText = searchRes;

    console.log(botText);

    const botMessage = {
      aiMessage: true,
      text: botText,
      id: uuid(),
      animate: true,
    };

    dispatch(
      addBotMessage({
        conversationId,
        botMessage,
      })
    );
    dispatch(setSelectedConversationId(conversationId));

    setText("");
  };

  // const handleSubmit = (e) => {
  //   if (text.length > 0) {
  //     // e.preventDefault();
  //     console.log("Sending");
  //     let data = {
  //       text,
  //     };
  //   }
  // };

  const handleSendMessage = () => {
    if (text.length > 0) {
      // handleSubmit();
      proceedMessage();
    }
  };
  const handleKeyPressed = (event) => {
    if (event.key === "Enter" && text.length > 0) {
      // handleSubmit();
      proceedMessage();
    }
  };

  return (
    <Container>
      <Row>
        <input
          className="input-container"
          type="text"
          id="chat-input"
          name="chat-input"
          placeholder="Enter your message"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={handleKeyPressed}
        ></input>
      </Row>
      <Row className="btn-container">
        <Col>
          <button
            disabled={ui}
            onClick={() => setUi(true)}
            className="btn-close2"
          >
            Close
          </button>
        </Col>
        <Col>
          <button className="btn-send" onClick={handleSendMessage}>
            Send
          </button>
        </Col>
      </Row>
    </Container>
  );
};

export default MessageInput;

[dosubot[bot]]

🤖

It seems like you're trying to parse a stringified JSON object back into JSON. However, the issue here is that result.text is already a string, so when you stringify it, it becomes a string of a string. When you try to parse it back into JSON, it remains a string, which is why you're having trouble.

Here's how you can fix it:

In your backend code, you don't need to stringify and parse the result. You can directly send the result as JSON. Modify your backend code like this:

result = await chain.call({
  query: message,
});

console.log(result);

return res.status(200).json(result);

In your frontend code, you're trying to parse the response from the server. However, since the response is already in JSON format, you don't need to parse it. You can directly access the text property of the response. Modify your frontend code like this:

try {
  const searchRes = await response.json();
  console.log(searchRes.text);
} catch (err) {
  console.log("Error parsing", err);
}

const botText = searchRes.text;

console.log(botText);

This should solve your issue. If you still face any problems, please provide more details about the error you're encountering.

Sources

• examples/src/tools/webbrowser.ts
• examples/src/agents/structured_chat_with_memory.ts
• langchain/src/llms/openai.ts
• langchain/src/llms/openai-chat.ts
• langchain/src/chat_models/openai.ts

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.