feat(conversation): hide SQL blocks by default based on user preference

frontend/src/components/Conversation/CodeBlock.tsx

@@ -10,11 +10,7 @@ import { CustomTooltip } from "../Library/Tooltip";
 import { monokai } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { format } from "prettier-sql";
 import { useEffect, useRef, useState } from "react";
-import {
-  useRunSqlInConversation,
-  useUpdateSqlQuery,
-  useGetUserProfile,
-} from "@/hooks";
+import { useRunSqlInConversation, useUpdateSqlQuery } from "@/hooks";
 import {
   Alert,
   AlertActions,
@@ -99,6 +95,8 @@ export const CodeBlock = ({
   onSaveSQLStringResult,
   forChart = false,
   minimize,
+  hideSqlByDefault,
+  resultType,
 }: {
   code: string;
   resultId: string;
@@ -109,18 +107,21 @@ export const CodeBlock = ({
   ) => void;
   forChart: boolean;
   minimize?: boolean;
+  hideSqlByDefault?: boolean;
+  resultType?: string;
 }) => {
-  const { data: profile } = useGetUserProfile();
   const [savedCode, setSavedCode] = useState<string>(() =>
     formattedCodeOrInitial(code, dialect as SupportedFormatters)
   );
   const [formattedCode, setFormattedCode] = useState<string>(() =>
     formattedCodeOrInitial(code, dialect as SupportedFormatters)
   );
   // Determine if SQL should be minimized by default based on user preference
-  const shouldHideSql = profile?.hide_sql_preference;
+  const effectiveDialectIsSql =
+    dialect?.toLowerCase() === "sql" ||
+    (resultType === "SQL_QUERY_STRING_RESULT" && dialect === undefined);
   const [minimized, setMinimized] = useState(
-    minimize || shouldHideSql || false
+    minimize || (hideSqlByDefault && effectiveDialectIsSql) || false
   );
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const syntaxHighlighterId = `syntax-highlighter-${resultId}`;
@@ -269,7 +270,11 @@ export const CodeBlock = ({
     <Minimizer
       minimized={minimized}
       setMinimized={setMinimized}
-      label="Code block"
+      label={
+        hideSqlByDefault && dialect?.toLowerCase() === "sql" && minimized
+          ? "SQL code hidden by default. You can change this in settings."
+          : "Code block"
+      }
       classes="bg-gray-900"
     >
       <div

frontend/src/components/Conversation/Message.tsx

@@ -1,7 +1,7 @@
 import logo from "@/assets/images/logo_md.png";
 import { IMessageWithResultsOut } from "@components/Library/types";
 import { UserCircleIcon } from "@heroicons/react/24/solid";
-import { useGetAvatar } from "@/hooks";
+import { useGetAvatar, useGetUserProfile } from "@/hooks";
 import { ShieldCheckIcon } from "@heroicons/react/24/outline";
 import { InfoTooltip } from "@components/Library/Tooltip";
 import { MessageResultRenderer } from "./MessageResultRenderer";
@@ -47,6 +47,8 @@ export const Message = ({
   className?: string;
   streaming?: boolean;
 }) => {
+  const { data: profile } = useGetUserProfile();
+  const hideSqlPreference = profile?.hide_sql_preference;
   return (
     <div
       className={classNames(
@@ -87,6 +89,7 @@ export const Message = ({
           <MessageResultRenderer
             initialResults={message.results || []}
             messageId={message.message.id || ""}
+            hideSqlByDefault={hideSqlPreference}
           />
         </div>
       </div>

frontend/src/components/Conversation/MessageResultRenderer.tsx

@@ -104,9 +104,11 @@ function getResultGroups(results: IResultType[]) {
 export const MessageResultRenderer = ({
   initialResults,
   messageId,
+  hideSqlByDefault,
 }: {
   initialResults: IResultType[];
   messageId: string;
+  hideSqlByDefault?: boolean;
 }) => {
   const [results, setResults] = useState(initialResults);
   const { groups: resultGroups, unlinkedGroup } = useMemo(
@@ -268,6 +270,8 @@ export const MessageResultRenderer = ({
                     result.result_id
                   )}
                   forChart={result.content.for_chart}
+                  hideSqlByDefault={hideSqlByDefault}
+                  resultType={result.type}
                 />
               )) ||
               (result.type === "CHART_GENERATION_RESULT" && (

frontend/src/hooks/settings.ts

@@ -157,6 +157,7 @@ export function useUpdateUserInfo(options = {}) {
       openai_base_url?: string;
       sentry_enabled?: boolean;
       analytics_enabled?: boolean;
+      hide_sql_preference?: boolean;
     }) => (await api.updateUserInfo(payload)).data,
     onSuccess() {
       enqueueSnackbar({