Add warning message near chat window about model hallucinations (#2794)

Referencing issue #2756

website/src/components/Chat/ChatListBase.tsx

@@ -13,6 +13,7 @@ import useSWR from "swr";
 import { ChatListItem } from "./ChatListItem";
 import { CreateChatButton } from "./CreateChatButton";
 import { InferencePoweredBy } from "./InferencePoweredBy";
+import { ChatWarning } from "./ChatWarning";
 
 export const ChatListBase = memo(function ChatListBase({
   chats, // TODO: can we remove this?
@@ -84,6 +85,7 @@ export const ChatListBase = memo(function ChatListBase({
           <ChatListItem key={chat.id} chat={chat} onUpdateTitle={handleUpdateTitle} onHide={handleHide}></ChatListItem>
         ))}
       </SimpleBar>
+      <ChatWarning />
       <InferencePoweredBy />
     </Box>
   );

website/src/components/Chat/ChatWarning.tsx

@@ -0,0 +1,27 @@
+import { Flex } from "@chakra-ui/react";
+import { Fragment } from "react";
+import { TeamMember } from "src/components/TeamMember";
+
+import data from "../../data/warning.json";
+
+const warn = ["warning"] as const;
+
+const rootProps = {
+  bg: "transparent",
+  borderRadius: 0,
+};
+
+export const ChatWarning = () => {
+  return (
+    <Flex direction="column" justifyContent="center" borderTopWidth="1px" p="2">
+      {warn.map((id) => (
+        <Fragment key={id}>
+          <TeamMember {...data.panels[id]} rootProps={rootProps}></TeamMember>
+        </Fragment>
+      ))}
+      <Flex justifyContent="center" pb="2" fontSize="sm" color="gray.500">
+        Usage Warning
+      </Flex>
+    </Flex>
+  );
+};

website/src/data/warning.json

@@ -0,0 +1,16 @@
+{
+  "panels": {
+    "warning": {
+      "name": "Hallucinations",
+      "title": "This Assistant is a demonstration version that does not have internet access. It may generate incorrect or misleading information. It is not suitable for important use cases or for giving advice.",
+      "url": "https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)",
+      "imageURL": "https://assets.stickpng.com/images/5a81af7d9123fa7bcc9b0793.png"
+    }
+  },
+  "groups": [
+    {
+      "name": "Usage notes",
+      "members": ["warning"]
+    }
+  ]
+}