adjust query provider menu

web/src/api/query_keys/chat.ts

@@ -34,7 +34,7 @@ const chatsGetList = (filters?: Parameters<typeof getListChats>[0]) =>
 
 const chatsBlackBoxMessages = (messageId: string) =>
   queryOptions<string | null>({
-    queryKey: ['chats', 'messages', messageId, 'black-box'] as const,
+    queryKey: ['chats', 'messages', messageId, 'local-only-black-box'] as const,
     staleTime: Infinity,
     enabled: false, //this is local
     queryFn: () => Promise.resolve(null)

web/src/api/query_keys/collection.ts

@@ -7,7 +7,7 @@ const collectionsGetList = (
 ) =>
   queryOptions<BusterCollectionListItem[]>({
     queryKey: ['collections', 'list', filters] as const,
-    staleTime: 4 * 1000,
+    staleTime: 60 * 1000,
     initialData: [],
     initialDataUpdatedAt: 0
   });

web/src/api/query_keys/dashboard.ts

@@ -10,8 +10,8 @@ const dashboardGetList = (
 ) =>
   queryOptions<BusterDashboardListItem[]>({
     queryKey: ['dashboard', 'list', filters] as const,
-    staleTime: 10 * 1000,
     initialData: [],
+    staleTime: 60 * 1000,
     initialDataUpdatedAt: 0
   });
 

web/src/api/query_keys/metric.ts

@@ -16,7 +16,7 @@ export const metricsGetMetric = (metricId: string, version_number?: number) => {
 export const metricsGetList = (filters?: Parameters<typeof listMetrics>[0]) =>
   queryOptions<BusterMetricListItem[]>({
     queryKey: ['metrics', 'list', filters] as const,
-    staleTime: 10 * 1000
+    staleTime: 60 * 1000
   });
 
 export const metricsGetData = (id: string, version_number?: number) =>

web/src/components/ui/scroll-area/ScrollArea.tsx

@@ -33,8 +33,8 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       'flex touch-none transition-colors select-none',
-      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2 flex-col border-t border-t-transparent p-[1px]',
       className
     )}
     {...props}>

web/src/context/BusterReactQuery/BusterReactQueryAndApi.tsx

@@ -1,18 +1,29 @@
 'use client';
 
 import { QueryClientProvider } from '@tanstack/react-query';
-import React, { useLayoutEffect } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import mainApi from '@/api/buster_rest/instances';
 import { defaultRequestHandler } from '@/api/createInstance';
 import nextApi from '@/api/next/instances';
 import { useSupabaseContext } from '../Supabase/SupabaseContextProvider';
 import { getQueryClient } from './getQueryClient';
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import {} from '@tanstack/react-query-devtools';
+import dynamic from 'next/dynamic';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+const ReactQueryDevtoolsPanel = dynamic(
+  () => import('@tanstack/react-query-devtools').then((mod) => mod.ReactQueryDevtoolsPanel),
+  {
+    loading: () => <div>Loading dev tools...</div>,
+    ssr: false
+  }
+);
 
 export const BusterReactQueryProvider = ({ children }: { children: React.ReactElement<any> }) => {
   const accessToken = useSupabaseContext((state) => state.accessToken);
   const checkTokenValidity = useSupabaseContext((state) => state.checkTokenValidity);
   const queryClient = getQueryClient(accessToken);
+  const [isDevToolsOpen, setIsDevToolsOpen] = useState(false);
 
   useLayoutEffect(() => {
     //reset all request interceptors
@@ -22,10 +33,15 @@ export const BusterReactQueryProvider = ({ children }: { children: React.ReactEl
     nextApi.interceptors.request.use((v) => defaultRequestHandler(v, { checkTokenValidity }));
   }, []);
 
+  useHotkeys('meta+shift+i', () => {
+    console.log('meta+shift+i');
+    setIsDevToolsOpen((prev) => !prev);
+  });
+
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      <ReactQueryDevtoolsPanel />
+      {isDevToolsOpen && <ReactQueryDevtoolsPanel />}
     </QueryClientProvider>
   );
 };

web/src/layouts/ChatLayout/ChatContainer/ChatHeader/ChatHeaderOptions/ChatHeaderDropdown.tsx

@@ -46,7 +46,11 @@ export const ChatContainerHeaderDropdown: React.FC<{
     ];
   }, [chatId, currentMessageId, deleteChat, duplicateChat]);
 
-  return <Dropdown items={menuItem}>{chatId ? children : null}</Dropdown>;
+  return (
+    <Dropdown align="end" items={menuItem}>
+      {chatId ? children : null}
+    </Dropdown>
+  );
 });
 
 ChatContainerHeaderDropdown.displayName = 'ChatContainerHeaderDropdown';