From a3410b7f69389398e9a684c2c9b742d039f032de Mon Sep 17 00:00:00 2001
From: Yash-1511 <yashp3020@gmail.com>
Date: Thu, 5 Jun 2025 13:51:03 +0530
Subject: [PATCH] feat(conversation): hide SQL blocks by default based on user
 preference

---
 .../src/components/Conversation/CodeBlock.tsx | 23 +++++++++++--------
 .../src/components/Conversation/Message.tsx   |  5 +++-
 .../Conversation/MessageResultRenderer.tsx    |  4 ++++
 frontend/src/hooks/settings.ts                |  1 +
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Conversation/CodeBlock.tsx b/frontend/src/components/Conversation/CodeBlock.tsx
index abad168c..4ef9730d 100644
--- a/frontend/src/components/Conversation/CodeBlock.tsx
+++ b/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,8 +107,9 @@ 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)
   );
@@ -118,9 +117,11 @@ export const CodeBlock = ({
     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
diff --git a/frontend/src/components/Conversation/Message.tsx b/frontend/src/components/Conversation/Message.tsx
index dcabf360..87c91fdc 100644
--- a/frontend/src/components/Conversation/Message.tsx
+++ b/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>
diff --git a/frontend/src/components/Conversation/MessageResultRenderer.tsx b/frontend/src/components/Conversation/MessageResultRenderer.tsx
index 890a2913..656b1d68 100644
--- a/frontend/src/components/Conversation/MessageResultRenderer.tsx
+++ b/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" && (
diff --git a/frontend/src/hooks/settings.ts b/frontend/src/hooks/settings.ts
index 1f7d277c..f6d03314 100644
--- a/frontend/src/hooks/settings.ts
+++ b/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({