Integrate

UI component

We leave this up to you, because it’s easier for you to style this to the flow of your application (i.e. we don’t have time to build it).

You basically need:

• An input box with a submit button.
• A message component to render Inconvo answers.
• A scrollable container to hold a list of message components.

Pop that behind a floating button on the bottom right of your page and you’re good to go!

You can checkout the code for our UI which we use in the playground here.

Input box

<form
  onSubmit={(e) => {
    e.preventDefault();
    if (!question) return;
    setQuestion("");
    setChatHistory((prevHistory) => [
      ...prevHistory,
      {
        type: "text",
        message: question,
        author: "User",
        api: {
          question,
          requestContext: contextValues,
          conversationId,
        },
      },
    ]);
    createQuestion.mutate({
      question,
      requestContext: contextValues,
      conversationId,
    });
  }}
>
  <Center>
    <TextInput
      value={question ?? ""}
      placeholder="Enter user question..."
      onChange={(e) => setQuestion(e.target.value)}
      style={{ width: "100%", padding: "10px" }}
      leftSection={
        <IconSearch
          style={{ width: rem(18), height: rem(18) }}
          stroke={1.5}
        />
      }
      rightSection={
        <ActionIcon
          type="submit">
        </ActionIcon>
      }
    />
  </Center>
</form>

Message component

import { BarChart, LineChart } from "@mantine/charts";
import { Text } from "@mantine/core";
import { type InconvoMessage } from "~/server/userDatabaseConnector/types";

export function Message({ message }: { message: InconvoMessage }) {
  if (message.type === "text") {
    return (
      <Text style={{ whiteSpace: "pre-wrap" }} c="black">
        {typeof message.message === "string"
          ? message.message
          : JSON.stringify(message.message)}
      </Text>
    );
  } else if (message.type === "bar_chart" && message.chartData) {
    return (
      <BarChart
        h="350"
        w="350"
        data={message.chartData.data}
        tickLine="x"
        xAxisLabel={message.chartData.xLabel}
        yAxisLabel={message.chartData.yLabel}
        dataKey="label"
        series={[
          {
            name: "value",
            color: "blue.6",
          },
        ]}
      />
    );
  } else if (message.type === "line_chart" && message.chartData) {
    return (
      <LineChart
        h="350"
        w="350"
        data={message.chartData.data}
        xAxisLabel={message.chartData.xLabel}
        yAxisLabel={message.chartData.yLabel}
        dataKey="label"
        series={[
          {
            name: "value",
            color: "blue.6",
          },
        ]}
      />
    );
  } else if (message.type === "error") {
    return (
      <>
        <Text c="red">Error:</Text>
        <Text c="red">{message.message}</Text>
      </>
    );
  } else {
    return <Text>Unknown answer type</Text>;
  }
}

Container

<ScrollArea h={"100%"} viewportRef={scrollAreaRef} type="always">
  <Box style={{ width: "100%" }}>
    {chatHistory.map((message, index) => (
      <Paper key={index} p="xs" px="md">
        {message.author === "AI" ? (
          <Flex justify="flex-start">
            <Box maw="80%">
              <MessageBox message={message}></MessageBox>
            </Box>
          </Flex>
        ) : (
          <Flex justify="flex-end">
            <Box maw="80%">
              <MessageBox message={message}></MessageBox>
            </Box>
          </Flex>
        )}
      </Paper>
    ))}
  </Box>
</ScrollArea>

API call

The Ask API call is simple.

You just need to send a POST request to our Ask API endpoint.

Request

curl --request POST \
    --url "https://api.inconvo.com/ask" \
    --header "Content-Type: application/json" \
    --data '{
      "question":
        "How many products have I sold per day of the week?",
      "conversationId": "conv_c9b1d",
      "requestContext": {
        "userId": "user_d7adc",
        "orgId": "org_99548"
      }
    }'

Response

{
    "type": "chart",
    "message":
        "Here's a breakdown of the number of
        products sold per day of the week.",
    "chart": {
      "type": "bar",
      "title": "Movies Rented Per Day of the Week",
      "xLabel": "Day of the Week",
      "yLabel": "Number of Movies Rented",
      "data": [
        {
          "label": "Monday",
          "value": 8
        },
        {
          "label": "Tuesday",
          "value": 8
        },
        {
          "label": "Wednesday",
          "value": 10
        },
        {
          "label": "Thursday",
          "value": 12
        },
        {
          "label": "Friday",
          "value": 10
        },
        {
          "label": "Saturday",
          "value": 10
        },
        {
          "label": "Sunday",
          "value": 6
        }
      ]
    }
}