From 219c96aee1fd5579cb0f5893a8bf48bc630019fb Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 21 Jul 2025 15:42:50 +0800
Subject: [PATCH] feat: code gen result highlight

---
 .../config/automatic/get-automatic-res.tsx    |  2 +-
 .../configuration/config/automatic/result.tsx | 23 +++++++++++++++----
 .../code-generator/get-code-generator-res.tsx |  4 ++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index 7c11510399..f75cc42433 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -364,7 +364,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         </div>
 
         {(!isLoading && current) && (
-          <div className='h-full w-0 grow p-6 pb-0'>
+          <div className='h-full w-0 grow bg-background-default-subtle p-6 pb-0'>
             <Result
               current={current!}
               currentVersionIndex={currentVersionIndex || 0}
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index b99988bffb..db2c2f8e1e 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -10,6 +10,7 @@ import type { GenRes } from '@/service/debug'
 import { RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import Toast from '@/app/components/base/toast'
+import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
 
 type Props = {
   current: GenRes
@@ -32,8 +33,8 @@ const Result: FC<Props> = ({
   const isGeneratorPrompt = generatorType === GeneratorType.prompt
 
   return (
-    <div>
-      <div className='mb-3  flex items-center justify-between'>
+    <div className='flex h-full flex-col'>
+      <div className='mb-3 flex  shrink-0 items-center justify-between'>
         <div>
           <div className='shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.generate.resTitle')}</div>
           <VersionSelector
@@ -56,10 +57,24 @@ const Result: FC<Props> = ({
       </div>
       {
         current?.message && (
-          <PromptToast message={current.message} className='mt-4' />
+          <PromptToast message={current.message} className='mt-4 shrink-0' />
         )
       }
-      <div className='mt-3'>{current?.modified}</div>
+      <div className='mt-3 grow'>
+        {isGeneratorPrompt ? (
+          <div>
+            {current?.modified}
+          </div>
+        ) : (
+          <CodeEditor
+            editorWrapperClassName='h-full'
+            className='bg-transparent pt-0'
+            value={current?.modified}
+            readOnly
+            hideTopMenu
+          />
+        )}
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 066fb774c9..f4e5801634 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -247,14 +247,14 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
         {isLoading && renderLoading}
         {!isLoading && !current && renderNoData}
         {(!isLoading && current) && (
-          <div className='h-full w-0 grow p-6 pb-0'>
+          <div className='h-full w-0 grow bg-background-default-subtle p-6 pb-0'>
             <Result
               current={current!}
               currentVersionIndex={currentVersionIndex || 0}
               setCurrentVersionIndex={setCurrentVersionIndex}
               versions={versions || []}
               onApply={showConfirmOverwrite}
-              generatorType={GeneratorType.prompt}
+              generatorType={GeneratorType.code}
             />
           </div>
         )}