wip

website/public/locales/en/chat.json

@@ -28,6 +28,7 @@
   "remove_plugin": "Remove Plugin",
   "repetition_penalty": "Repetition penalty",
   "save": "Save",
+  "show_hidden": "Show hidden chats",
   "temperature": "Temperature",
   "top_k": "Top K",
   "top_p": "Top P",

website/src/components/Chat/ChatHiddenSwitch.tsx

@@ -0,0 +1,23 @@
+import { FormControl, FormLabel, Switch } from "@chakra-ui/react";
+import { useTranslation } from "next-i18next";
+import { ChangeEvent, useCallback } from "react";
+
+export const ChatHiddenSwitch = ({ onChange }) => {
+  const { t } = useTranslation("chat");
+
+  const onClick = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event.target.checked);
+    },
+    [onChange]
+  );
+
+  return (
+    <FormControl display="flex" alignItems="center" w="auto">
+      <FormLabel htmlFor="show-hidden-chats-switch" mb="0">
+        {t("show_hidden")}
+      </FormLabel>
+      <Switch id="show-hidden-chats-switch" onChange={onClick} />
+    </FormControl>
+  );
+};

website/src/components/Chat/ChatListBase.tsx

@@ -1,22 +1,24 @@
 import "simplebar-react/dist/simplebar.min.css";
 
-import { Box, CardProps } from "@chakra-ui/react";
+import { Box, CardProps, Flex } from "@chakra-ui/react";
 import { Plus } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { memo, useCallback } from "react";
 import SimpleBar from "simplebar-react";
-import { GetChatsResponse } from "src/types/Chat";
+import { useBoolean } from "usehooks-ts";
 
+import { ChatHiddenSwitch } from "./ChatHiddenSwitch";
 import { ChatListItem } from "./ChatListItem";
 import { CreateChatButton } from "./CreateChatButton";
 import { InferencePoweredBy } from "./InferencePoweredBy";
 import { useListChatPagination } from "./useListChatPagination";
 
 export const ChatListBase = memo(function ChatListBase({
-  initialChats, // TODO: can we remove this?
+  allowHiddenChats,
   ...props
-}: CardProps & { initialChats?: GetChatsResponse }) {
-  const { loadMoreRef, responses, mutateChatResponses } = useListChatPagination(initialChats);
+}: CardProps & { allowHiddenChats?: boolean }) {
+  const { value: includeHidden, setValue: setIncludeHidden } = useBoolean(false);
+  const { loadMoreRef, responses, mutateChatResponses } = useListChatPagination(includeHidden);
   const chats = responses?.flatMap((response) => response.chats) || [];
 
   const { t } = useTranslation(["common", "chat"]);
@@ -78,19 +80,22 @@ export const ChatListBase = memo(function ChatListBase({
       }}
       {...props}
     >
-      <CreateChatButton
-        py="5"
-        leftIcon={<Plus size="16px"></Plus>}
-        variant="outline"
-        justifyContent="start"
-        colorScheme="blue"
-        borderRadius="lg"
-        mx="3"
-        mb="2"
-        onUpdated={handleCreateChat}
-      >
-        {t("create_chat")}
-      </CreateChatButton>
+      <Flex>
+        <CreateChatButton
+          py="5"
+          leftIcon={<Plus size="16px" />}
+          variant="outline"
+          justifyContent="start"
+          colorScheme="blue"
+          borderRadius="lg"
+          mx="3"
+          onUpdated={handleCreateChat}
+          flexGrow="1"
+        >
+          {t("create_chat")}
+        </CreateChatButton>
+        {allowHiddenChats && <ChatHiddenSwitch onChange={setIncludeHidden} />}
+      </Flex>
       <SimpleBar
         style={{ padding: "4px 0", maxHeight: "100%", height: "100%", minHeight: "0" }}
         classNames={{

website/src/components/Chat/useListChatPagination.ts

@@ -3,7 +3,7 @@ import { get } from "src/lib/api";
 import { GetChatsResponse } from "src/types/Chat";
 import useSWRInfinite from "swr/infinite";
 
-export function useListChatPagination(initialChats?: GetChatsResponse) {
+export function useListChatPagination(includeHidden: boolean) {
   const {
     data: responses,
     mutate: mutateChatResponses,
@@ -19,7 +19,6 @@ export function useListChatPagination(initialChats?: GetChatsResponse) {
     {
       keepPreviousData: true,
       revalidateFirstPage: false,
-      fallbackData: initialChats ? [initialChats] : undefined,
     }
   );
   const loadMoreRef = useRef(null);

website/src/pages/chat/index.tsx

@@ -14,6 +14,7 @@ const ChatList = () => {
         <title>{t("chat")}</title>
       </Head>
       <ChatListBase
+        allowHiddenChats
         className="max-w-5xl mx-auto"
         pt="4"
         px="4"