feat: add ability to share chats (#594)

components/chat-header.tsx

@@ -11,8 +11,19 @@ import { PlusIcon, VercelIcon } from './icons';
 import { useSidebar } from './ui/sidebar';
 import { memo } from 'react';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { VisibilityType, VisibilitySelector } from './visibility-selector';
 
-function PureChatHeader({ selectedModelId }: { selectedModelId: string }) {
+function PureChatHeader({
+  chatId,
+  selectedModelId,
+  selectedVisibilityType,
+  isReadonly,
+}: {
+  chatId: string;
+  selectedModelId: string;
+  selectedVisibilityType: VisibilityType;
+  isReadonly: boolean;
+}) {
   const router = useRouter();
   const { open } = useSidebar();
 
@@ -21,6 +32,7 @@ function PureChatHeader({ selectedModelId }: { selectedModelId: string }) {
   return (
     <header className="flex sticky top-0 bg-background py-1.5 items-center px-2 md:px-2 gap-2">
       <SidebarToggle />
+
       {(!open || windowWidth < 768) && (
         <Tooltip>
           <TooltipTrigger asChild>
@@ -39,10 +51,22 @@ function PureChatHeader({ selectedModelId }: { selectedModelId: string }) {
           <TooltipContent>New Chat</TooltipContent>
         </Tooltip>
       )}
-      <ModelSelector
-        selectedModelId={selectedModelId}
-        className="order-1 md:order-2"
-      />
+
+      {!isReadonly && (
+        <ModelSelector
+          selectedModelId={selectedModelId}
+          className="order-1 md:order-2"
+        />
+      )}
+
+      {!isReadonly && (
+        <VisibilitySelector
+          chatId={chatId}
+          selectedVisibilityType={selectedVisibilityType}
+          className="order-1 md:order-3"
+        />
+      )}
+
       <Button
         className="bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 text-zinc-50 dark:text-zinc-900 hidden md:flex py-1.5 px-2 h-fit md:h-[34px] order-4 md:ml-auto"
         asChild