fix: datapilot code block ui (#1452)

Author: saravmajestic

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>

webview_panels/src/modules/dataPilot/datapilot.module.scss

@@ -153,3 +153,7 @@ body {
     }}
   }
 }
+
+.codeblock{
+  --code-bg: transparent;
+}

webview_panels/src/uiCore/components/codeblock/index.tsx

@@ -10,27 +10,32 @@ interface Props {
   fileName?: string;
   showLineNumbers?: boolean;
   titleActions?: ReactNode;
+  classname?: string;
 }
 const CodeBlockComponent = ({
   code,
   language,
   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
         showLineNumbers={showLineNumbers}
         code={code}
         fileName={fileName}
         theme={codeBlockTheme}
+        editorTheme={editorTheme}
         language={language}
         titleActions={titleActions}
+        className={classname}
       />
     </div>
   );