vuchat 1.0.0

package/src/pages/chatbot/components/ChatSection/components/ResponseCard/ResponseCard.tsx

@@ -0,0 +1,181 @@
+import { useRef, useState } from "react";
+import { VuIcon } from "../../../../../../components/Icons/VuIcon";
+import {
+  ChartContainer,
+  Container,
+  ErrorContainer,
+  ResponseContainer,
+  SideButtonsContainer,
+  TextContainer,
+  TimeContainer,
+} from "./styled";
+
+import { VuIconButton } from "../../../../../../components/Buttons";
+import React from "react";
+import BotIcon from "../../../../../../assets/icons/bot.svg";
+import CopyIcon from "../../../../../../assets/icons/copy.svg";
+import ThumbsUpIcon from "../../../../../../assets/icons/thumbs-up.svg";
+import ThumbsDownIcon from "../../../../../../assets/icons/thumbs-down.svg";
+import { Charts } from "../Charts/Charts";
+import { Tooltip } from "react-tooltip";
+import { useMutation } from "react-query";
+import { likeDislikeChat } from "../../../../../../components/api/api";
+
+// Keeping this data for future reference.
+
+/* const pieData = {
+  labels: ["Red", "Blue", "Yellow"],
+  datasets: [
+    {
+      label: "My First Dataset",
+      data: [300, 50, 100],
+      backgroundColor: [
+        "rgb(255, 99, 132)",
+        "rgb(54, 162, 235)",
+        "rgb(255, 205, 86)",
+      ],
+      hoverOffset: 4,
+    },
+  ],
+}; */
+
+// const lineData = {
+//   labels: ["January", "February", "March", "April", "May", "June", "July"],
+//   datasets: [
+//     {
+//       label: "My First Dataset",
+//       data: [65, 59, 80, 81, 56, 55, 40],
+//       backgroundColor: [
+//         "rgba(255, 99, 132, 0.2)",
+//         "rgba(255, 159, 64, 0.2)",
+//         "rgba(255, 205, 86, 0.2)",
+//         "rgba(75, 192, 192, 0.2)",
+//         "rgba(54, 162, 235, 0.2)",
+//         "rgba(153, 102, 255, 0.2)",
+//         "rgba(201, 203, 207, 0.2)",
+//       ],
+//       borderColor: [
+//         "rgb(255, 99, 132)",
+//         "rgb(255, 159, 64)",
+//         "rgb(255, 205, 86)",
+//         "rgb(75, 192, 192)",
+//         "rgb(54, 162, 235)",
+//         "rgb(153, 102, 255)",
+//         "rgb(201, 203, 207)",
+//       ],
+//       borderWidth: 1,
+//     },
+//   ],
+// };
+
+interface ResponseCardProps {
+  answer: string;
+  chartData?: any;
+  onError?: boolean;
+  chatID?: number;
+  like?: number;
+  dislike?: number;
+}
+
+export const ResponseCard: React.FC<ResponseCardProps> = ({
+  answer,
+  chartData,
+  onError = false,
+  chatID,
+  like,
+  dislike,
+}) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const [likeDislike, setLikeDislike] = useState<{
+    like: boolean;
+    dislike: boolean;
+  }>({
+    like: !!like,
+    dislike: !!dislike,
+  });
+
+  const createLikeDislikeMutation = useMutation({
+    mutationFn: likeDislikeChat,
+    onSuccess: (data) => {
+      setLikeDislike({
+        like: data.like,
+        dislike: data.dislike,
+      });
+    },
+  });
+
+  const handleCopyClick = async () => {
+    if (divRef.current) {
+      const textToCopy = divRef.current.textContent || "";
+      try {
+        await navigator.clipboard.writeText(textToCopy);
+      } catch (err) {
+        console.error("Failed to copy text: ", err);
+      }
+    }
+  };
+
+  const handleLikeDislike = (like: number, dislike: number) => {
+    chatID &&
+      createLikeDislikeMutation.mutate({
+        chatID: chatID,
+        like,
+        dislike,
+      });
+  };
+
+  const mapChartData = () => {
+    const labels = chartData.chart_labels;
+    const data = chartData.chart_values;
+    return {
+      labels,
+      datasets: [
+        {
+          label: chartData.chart_title,
+          data,
+        },
+      ],
+    };
+  };
+
+  return (
+    <Container>
+      <ResponseContainer>
+        <div>
+          <VuIcon svg={BotIcon} size={32} />
+        </div>
+        <TextContainer ref={divRef}>
+          {!onError ? answer : <ErrorContainer>{answer}</ErrorContainer>}
+        </TextContainer>
+        {!onError && (
+          <SideButtonsContainer>
+            <VuIconButton onClick={handleCopyClick} icon={CopyIcon} />
+            <VuIconButton
+              icon={ThumbsUpIcon}
+              data-tooltip-id="tooltip-btns"
+              data-tooltip-content="Like"
+              iconColor={likeDislike.like ? "fill-rose-500" : undefined}
+              onClick={() => handleLikeDislike(1, 0)}
+            />
+            <VuIconButton
+              icon={ThumbsDownIcon}
+              data-tooltip-id="tooltip-btns"
+              data-tooltip-content="Dislike"
+              iconColor={likeDislike.dislike ? "fill-rose-500" : undefined}
+              onClick={() => handleLikeDislike(0, 1)}
+            />
+          </SideButtonsContainer>
+        )}
+      </ResponseContainer>
+      {chartData && chartData.chart_possible && (
+        <ChartContainer>
+          {!chartData.error && (
+            <Charts type={chartData.chart_type} data={mapChartData()} />
+          )}
+        </ChartContainer>
+      )}
+      {/* <TimeContainer>2 Oct 2:22 PM</TimeContainer> */}
+      <Tooltip id="tooltip-btns" place="right" />
+    </Container>
+  );
+};

package/src/pages/chatbot/components/ChatSection/components/ResponseCard/styled.ts

@@ -0,0 +1,44 @@
+import tw from "tailwind-styled-components";
+
+export const Container = tw.div`
+    bg-white
+    px-10
+    py-5
+    w-full
+`;
+
+export const ResponseContainer = tw.div`
+    flex
+    gap-x-3
+`;
+
+export const ChartContainer = tw.div`
+    flex
+    justify-center
+    mt-4
+    w-full
+`;
+
+export const TimeContainer = tw.div`
+    flex
+    justify-end
+    text-xs
+`;
+
+export const TextContainer = tw.div`
+    text-sm
+    text-left
+    p-1
+    w-full
+`;
+
+export const SideButtonsContainer = tw.div`
+    flex 
+    flex-col 
+    pl-7 
+    gap-2
+`
+
+export const ErrorContainer = tw.div`
+    text-red-500
+`

package/src/pages/chatbot/components/ChatSection/components/ResponseLoader/ResponseLoader.tsx

@@ -0,0 +1,23 @@
+import { Container, ReponseLoaderWrapper, ContentContainer } from "./styled";
+import React from "react";
+import SyncLoader from "react-spinners/SyncLoader";
+//@ts-ignore
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+export const ResponseLoader: React.FC = () => {
+  return (
+    <Container>
+      <ReponseLoaderWrapper>
+        <SyncLoader color={"#000"} size={4} aria-label="Loading Spinner" />
+        <ContentContainer>
+          <p>Generating Response</p>
+          <Skeleton width={"60%"} />
+          <Skeleton width={"55%"} />
+          <Skeleton width={"50%"} />
+          <Skeleton width={"45%"} />
+        </ContentContainer>
+      </ReponseLoaderWrapper>
+    </Container>
+  );
+};

package/src/pages/chatbot/components/ChatSection/components/ResponseLoader/styled.ts

@@ -0,0 +1,23 @@
+import tw from "tailwind-styled-components";
+
+export const Container = tw.div`
+    bg-white
+    px-10
+    py-4
+    my-5
+    w-full
+`;
+
+export const ReponseLoaderWrapper = tw.div`
+    flex
+    gap-x-3
+`;
+
+export const ContentContainer = tw.div`
+    flex
+    flex-col
+    text-sm
+    text-left
+    w-full
+    gap-2
+`;

package/src/pages/chatbot/components/ChatSection/components/SuggestedQuestions/SuggestedQuestions.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Container } from "./styled";
+import { VuButton } from "../../../../../../components";
+import { Questions } from "../../../RecentConversations/questions";
+
+const SuggestedQuestions: React.FC = () => {
+  return (
+    <Container>
+      {Questions.slice(0, 6).map((question) => (
+        <VuButton $fill="text">
+          <span className="text-sm">{question}</span>
+        </VuButton>
+      ))}
+    </Container>
+  );
+};
+
+export default SuggestedQuestions;

package/src/pages/chatbot/components/ChatSection/components/SuggestedQuestions/styled.ts

@@ -0,0 +1,12 @@
+import tw from "tailwind-styled-components";
+
+export const Container = tw.div`
+    bg-transparent
+    px-20
+    py-4
+    my-5
+    grid 
+    grid-cols-3
+    gap-x-8
+    gap-y-5
+`;

package/src/pages/chatbot/components/ChatSection/styled.ts

@@ -0,0 +1,27 @@
+import tw from "tailwind-styled-components";
+
+export const Container = tw.div`
+    flex
+    flex-col
+    items-center
+    justify-center
+    px-[7.5rem]
+    py-5
+`;
+
+export const ChartWrapper = tw.div`
+    grow 
+    overflow-y-auto
+`;
+
+export const InputContainer = tw.div`
+    bg-alice_blue
+    p-2
+    w-full 
+    pl-[7.5rem]
+    pr-[8rem]`;
+
+
+export const ConversationContainer = tw.div`
+    w-full
+`

package/src/pages/chatbot/components/RecentConversations/RecentConversations.tsx

@@ -0,0 +1,129 @@
+import React, { useState, FC, useEffect } from "react";
+import {
+  Container,
+  IconAndTextContainer,
+  IconAndTextSubContainer,
+  IconContainer,
+  ListContainer,
+  QuestionContainer,
+} from "./styled";
+
+import { Tooltip } from "react-tooltip";
+import { VuIconButton } from "../../../../components/Buttons";
+import { VuIcon } from "../../../../components/Icons/VuIcon";
+import MessageIcon from "../../../../assets/icons/message.svg";
+import DeleteIcon from "../../../../assets/icons/delete.svg";
+import {
+  deleteConversation,
+  getConversations,
+} from "../../../../components/api/api";
+import { useQuery, useMutation, useQueryClient } from "react-query";
+import ClipLoader from "react-spinners/ClipLoader";
+import { Conversations } from "../../../../components/api/types";
+import { LoaderContainer } from "../../styled";
+import { ChatInfo } from "../../Chatbot";
+
+interface Props {
+  handleSetConversationInfo: (chatInfoOld?: ChatInfo) => void;
+  searchQuery: string;
+  currentConversationInfo?: ChatInfo;
+}
+
+function filterData(data: Conversations, query: string) {
+  return data.filter((item) =>
+    item.chat_info[0].question.toLowerCase().includes(query.toLowerCase())
+  );
+}
+
+export const RecentConversations: FC<Props> = ({
+  handleSetConversationInfo,
+  searchQuery,
+  currentConversationInfo,
+}) => {
+  const [filteredData, setFilteredData] = useState<Conversations>([]);
+
+  const queryClient = useQueryClient();
+
+  const { isLoading, status, data, refetch } = useQuery({
+    queryKey: "conversations",
+    queryFn: () => getConversations(),
+    enabled: false,
+  });
+
+  useEffect(() => {
+    const filtered = filterData(data ?? [], searchQuery);
+    setFilteredData(filtered);
+  }, [data, searchQuery]);
+
+  useEffect(() => {
+    refetch();
+  }, [currentConversationInfo]);
+
+  const deleteChatMutation = useMutation({
+    mutationFn: deleteConversation,
+    onSuccess: (_, conversationID) => {
+      queryClient.invalidateQueries(["conversations", conversationID]);
+      handleSetConversationInfo();
+      queryClient.invalidateQueries("conversations");
+    },
+  });
+
+  if (status === "loading")
+    return (
+      <LoaderContainer>
+        <ClipLoader
+          color={"#000"}
+          loading={isLoading}
+          size={25}
+          aria-label="Loading Spinner"
+          data-testid="loader"
+        />
+      </LoaderContainer>
+    );
+  if (status === "error") return <h1>Error in Loading Recent Conversations</h1>;
+
+  return (
+    <Container>
+      <div>Recent Conversations</div>
+      <ListContainer>
+        {filteredData?.map((question, index) => (
+          <IconAndTextContainer
+            key={index}
+            isSelected={currentConversationInfo?.conversationID === question.id}
+            onClick={() =>
+              handleSetConversationInfo({
+                conversationID: question.id,
+                isNew: false,
+              })
+            }
+            data-tooltip-id="question-tooltip"
+            data-tooltip-content={question.chat_info[0].question}
+          >
+            <IconAndTextSubContainer>
+              <IconContainer>
+                <VuIcon svg={MessageIcon} />
+              </IconContainer>
+              <QuestionContainer>
+                {question.chat_info[0].question}
+              </QuestionContainer>
+            </IconAndTextSubContainer>
+            {currentConversationInfo?.conversationID === question.id && (
+              <IconContainer>
+                <VuIconButton
+                  name="delete"
+                  icon={DeleteIcon}
+                  disabled={deleteChatMutation.isLoading}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteChatMutation.mutate(question.id);
+                  }}
+                />
+              </IconContainer>
+            )}
+          </IconAndTextContainer>
+        ))}
+      </ListContainer>
+      <Tooltip id="question-tooltip" />
+    </Container>
+  );
+};

package/src/pages/chatbot/components/RecentConversations/questions.ts

@@ -0,0 +1,24 @@
+export const Questions: string[] = [
+  "What is the difference between software design and software architecture?",
+  "Explain the concept of Object-Oriented Programming (OOP).",
+  "What is the SOLID principle in software development, and why is it important?",
+  "Describe the difference between functional and imperative programming.",
+  "What is version control, and why is it essential in software development?",
+  "What is a software development life cycle (SDLC), and name some common SDLC models.",
+  "Explain the concept of a code review and its benefits.",
+  "What is the purpose of unit testing in software development?",
+  "Describe the differences between static and dynamic typing in programming languages.",
+  "What is a software bug, and how can it be prevented or mitigated?",
+  "Explain the concept of refactoring in software development.",
+  "What is the DRY (Don't Repeat Yourself) principle, and how does it relate to code quality?",
+  "Describe the role of a software architect in a development project.",
+  "What is the difference between a thread and a process in the context of multitasking?",
+  "Explain the importance of documentation in software development.",
+  "What is the difference between a library and a framework in programming?",
+  "Describe the concept of Continuous Integration (CI) and Continuous Delivery (CD).",
+  "What is the Agile software development methodology, and what are its key principles?",
+  "Explain the concept of a design pattern in software development, and give an example.",
+  "What is a RESTful API, and how does it differ from SOAP?",
+  "Describe the principles of Test-Driven Development (TDD).",
+  // Add more questions here...
+];

package/src/pages/chatbot/components/RecentConversations/styled.ts

@@ -0,0 +1,49 @@
+import tw from "tailwind-styled-components";
+
+interface IconAndTextContainerProps {
+  isSelected: boolean;
+}
+
+export const Container = tw.div`
+  flex
+  flex-col
+  text-left
+  grow
+`;
+
+export const ListContainer = tw.div`
+  my-2
+  grow
+  overflow-y-auto
+  h-32
+`;
+
+export const IconAndTextContainer = tw.div<IconAndTextContainerProps>`
+  flex
+  justify-between
+  items-center
+  p-1.5
+  ${(p) =>
+    p.isSelected
+      ? `
+      bg-gainsboro
+  `
+      : `bg-white`}
+`;
+
+export const IconAndTextSubContainer = tw.div`
+flex
+items-center
+overflow-x-hidden
+`;
+
+export const IconContainer = tw.span`
+  mr-2
+`;
+
+export const QuestionContainer = tw.div`
+  truncate
+  text-sm
+  text-center
+  cursor-pointer
+`;

package/src/pages/chatbot/index.ts

@@ -0,0 +1 @@
+export * from "./Chatbot";

package/src/pages/chatbot/styled.ts

@@ -0,0 +1,77 @@
+import tw from "tailwind-styled-components";
+
+export const FlexContainerRow = tw.div`
+    flex
+`;
+
+export const FlexContainerCol = tw.div`
+    flex
+    flex-col
+    gap-4
+    grow
+`;
+
+export const Header = tw.div`
+    flex
+    justify-between
+    mb-10
+`;
+
+export const HeaderIconAndText = tw.div`
+    flex
+    items-center
+`;
+
+export const Container = tw.div`
+    flex
+    h-full
+`;
+
+export const LeftSectionContainer = tw.div`
+    flex
+    flex-col
+`;
+
+export const RecentConversationsContainer = tw.div`
+    grow
+    w-80
+    pr-6
+    min-w-[20rem]
+`;
+
+export const RecentConversationsSubContainer = tw.div`
+    h-full
+    flex
+    flex-col
+`;
+
+export const ChatContainer = tw.div`
+    flex
+    flex-col
+    bg-alice_blue
+    relative
+    py-10
+    w-full
+`;
+
+export const LoaderContainer = tw.div`
+  flex
+  justify-center
+  items-center
+  h-full
+`;
+
+export const SelectWithLabelContainer = tw.div`
+  flex
+  items-center
+  mb-2
+  pr-6
+`;
+
+export const SelectContainer = tw.div`
+  grow
+`;
+
+export const SelectLabelContainer = tw.div`
+  mr-2
+`;

package/src/pages/index.ts

@@ -0,0 +1 @@
+export * from "./VuChat";

package/src/pages/styled.ts

@@ -0,0 +1,9 @@
+import tw from "tailwind-styled-components";
+
+export const MainContainer = tw.div`
+    p-6
+    h-full
+    bg-white
+    flex
+    flex-col
+`;

package/src/utils/icons.ts

@@ -0,0 +1,3 @@
+const iconRoot = "/src/assets/icons/";
+
+export const getSvgPath = (name: string) => `${iconRoot}${name}.svg`;

package/src/utils/iconsList.tsx

@@ -0,0 +1,14 @@
+export const vuIconList = [
+  "add",
+  "arrow-left",
+  "bot",
+  "copy",
+  "delete",
+  "message",
+  "search",
+  "send",
+  "thumbs-up",
+  "thumbs-down",
+] as const;
+
+export type VuIconName = (typeof vuIconList)[number];

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./icons";
+export * from "./iconsList";

package/tailwind.config.ts

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#11339A",
+        white: "#FFF",
+        black: "#000",
+        light_pink: "#FFB2B8",
+        gainsboro: "#D8DEE4",
+        lavender_blush: "#FEF2F3",
+        alice_blue: "#F3F6FC",
+      },
+    },
+  },
+  plugins: [],
+};