From 5336c7ac412572d3e761f890cf5dfc9a0606706c Mon Sep 17 00:00:00 2001
From: Saravanan <sarav.majestic@gmail.com>
Date: Mon, 7 Oct 2024 10:44:36 +0530
Subject: [PATCH] fix: datapilot code block ui (#1452)

---
 .../dataPilot/components/queryAnalysis/QueryAnalysis.tsx     | 3 ++-
 webview_panels/src/modules/dataPilot/datapilot.module.scss   | 4 ++++
 webview_panels/src/uiCore/components/codeblock/index.tsx     | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/webview_panels/src/modules/dataPilot/components/queryAnalysis/QueryAnalysis.tsx b/webview_panels/src/modules/dataPilot/components/queryAnalysis/QueryAnalysis.tsx
index c1fdc9c89..4857d2cbb 100644
--- a/webview_panels/src/modules/dataPilot/components/queryAnalysis/QueryAnalysis.tsx
+++ b/webview_panels/src/modules/dataPilot/components/queryAnalysis/QueryAnalysis.tsx
@@ -10,6 +10,7 @@ import { QueryAnalysisCommands } from "./commands";
 import { AltimateIcon } from "@assets/icons";
 import { QueryAnalysisType } from "./types";
 import { useMemo } from "react";
+import classes from "../../datapilot.module.scss";
 
 const QUERY_HAPPY_LIMIT = 10;
 const DefaultActions = [
@@ -52,7 +53,7 @@ const QueryAnalysis = (): JSX.Element | null => {
     <Stack direction="column">
       <DatapilotHeader />
 
-      <CodeBlock code={chat.query} language="sql" fileName={chat.fileName} />
+      <CodeBlock code={chat.query} language="sql" fileName={chat.fileName} classname={classes.codeblock}/>
       {showLineLimitWarning ? (
         <Card>
           <CardTitle>
diff --git a/webview_panels/src/modules/dataPilot/datapilot.module.scss b/webview_panels/src/modules/dataPilot/datapilot.module.scss
index 4ea4fcb78..0db2308c3 100644
--- a/webview_panels/src/modules/dataPilot/datapilot.module.scss
+++ b/webview_panels/src/modules/dataPilot/datapilot.module.scss
@@ -153,3 +153,7 @@ body {
     }}
   }
 }
+
+.codeblock{
+  --code-bg: transparent;
+}
\ No newline at end of file
diff --git a/webview_panels/src/uiCore/components/codeblock/index.tsx b/webview_panels/src/uiCore/components/codeblock/index.tsx
index 1626cd62d..793590abd 100644
--- a/webview_panels/src/uiCore/components/codeblock/index.tsx
+++ b/webview_panels/src/uiCore/components/codeblock/index.tsx
@@ -10,6 +10,7 @@ interface Props {
   fileName?: string;
   showLineNumbers?: boolean;
   titleActions?: ReactNode;
+  classname?: string;
 }
 const CodeBlockComponent = ({
   code,
@@ -17,11 +18,13 @@ const CodeBlockComponent = ({
   fileName,
   showLineNumbers,
   titleActions,
+  classname
 }: Props): JSX.Element => {
   const {
     state: { theme },
   } = useAppContext();
   const codeBlockTheme = theme === Themes.Dark ? "dark" : "light";
+  const editorTheme = theme === Themes.Dark ? "vsc-dark-plus" : "vs";
   return (
     <div className={classes.codeblock}>
       <CodeblockLib
@@ -29,8 +32,10 @@ const CodeBlockComponent = ({
         code={code}
         fileName={fileName}
         theme={codeBlockTheme}
+        editorTheme={editorTheme}
         language={language}
         titleActions={titleActions}
+        className={classname}
       />
     </div>
   );