diff --git a/web/app/components/base/features/feature-panel/speech-to-text/index.tsx b/web/app/components/base/features/feature-panel/speech-to-text/index.tsx
index e452b38971..2e5e3de439 100644
--- a/web/app/components/base/features/feature-panel/speech-to-text/index.tsx
+++ b/web/app/components/base/features/feature-panel/speech-to-text/index.tsx
@@ -1,25 +1,22 @@
 'use client'
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Panel from '@/app/components/app/configuration/base/feature-panel'
 import { Microphone01 } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 
 const SpeechToTextConfig: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Panel
-      title={
-        <div className='flex items-center gap-2'>
-          <div>{t('appDebug.feature.speechToText.title')}</div>
-        </div>
-      }
-      headerIcon={<Microphone01 className='w-4 h-4 text-[#7839EE]' />}
-      headerRight={
-        <div className='text-xs text-gray-500'>{t('appDebug.feature.speechToText.resDes')}</div>
-      }
-      noBodySpacing
-    />
+    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
+      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
+        <Microphone01 className='w-4 h-4 text-[#7839EE]' />
+      </div>
+      <div className='shrink-0 mr-2 flex items-center whitespace-nowrap text-sm text-gray-800 font-semibold'>
+        <div>{t('appDebug.feature.speechToText.title')}</div>
+      </div>
+      <div className='grow'></div>
+      <div className='text-xs text-gray-500'>{t('appDebug.feature.speechToText.resDes')}</div>
+    </div>
   )
 }
 export default React.memo(SpeechToTextConfig)
diff --git a/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx b/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx
index 533d249487..e0519b3283 100644
--- a/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx
+++ b/web/app/components/base/features/feature-panel/suggested-questions-after-answer/index.tsx
@@ -2,32 +2,27 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Panel from '@/app/components/app/configuration/base/feature-panel'
-import SuggestedQuestionsAfterAnswerIcon from '@/app/components/app/configuration/base/icons/suggested-questions-after-answer-icon'
-import Tooltip from '@/app/components/base/tooltip'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import { MessageSmileSquare } from '@/app/components/base/icons/src/vender/solid/communication'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 const SuggestedQuestionsAfterAnswer: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Panel
-      title={
-        <div className='flex items-center gap-2'>
-          <div>{t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}</div>
-          <Tooltip htmlContent={<div className='w-[180px]'>
-            {t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}
-          </div>} selector='suggestion-question-tooltip'>
-            <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
-          </Tooltip>
-        </div>
-      }
-      headerIcon={<SuggestedQuestionsAfterAnswerIcon />}
-      headerRight={
-        <div className='text-xs text-gray-500'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.resDes')}</div>
-      }
-      noBodySpacing
-    />
+    <div className='flex items-center px-3 h-12 bg-gray-50 rounded-xl overflow-hidden'>
+      <div className='shrink-0 flex items-center justify-center mr-1 w-6 h-6'>
+        <MessageSmileSquare className='w-4 h-4 text-[#06AED4]' />
+      </div>
+      <div className='shrink-0 mr-2 flex items-center whitespace-nowrap text-sm text-gray-800 font-semibold'>
+        <div className='mr-2'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}</div>
+        <TooltipPlus popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}>
+          <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+        </TooltipPlus>
+      </div>
+      <div className='grow'></div>
+      <div className='text-xs text-gray-500'>{t('appDebug.feature.suggestedQuestionsAfterAnswer.resDes')}</div>
+    </div>
   )
 }
 export default React.memo(SuggestedQuestionsAfterAnswer)
diff --git a/web/app/components/base/icons/assets/vender/solid/communication/message-smile-square.svg b/web/app/components/base/icons/assets/vender/solid/communication/message-smile-square.svg
new file mode 100644
index 0000000000..105541fdca
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/communication/message-smile-square.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="message-smile-square">
+<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M10.8273 1.33337H5.17221C4.63556 1.33337 4.19265 1.33336 3.83185 1.36284C3.45712 1.39345 3.11265 1.45916 2.7891 1.62402C2.28733 1.87969 1.87938 2.28763 1.62372 2.7894C1.45886 3.11296 1.39315 3.45743 1.36253 3.83216C1.33306 4.19295 1.33306 4.63586 1.33307 5.17251L1.33304 9.42509C1.33275 9.95535 1.33254 10.3491 1.42394 10.6902C1.67052 11.6105 2.38931 12.3293 3.30955 12.5758C3.51453 12.6308 3.73853 12.6526 3.99974 12.6612L3.99974 13.5807C3.99971 13.7375 3.99967 13.8974 4.01157 14.0284C4.02296 14.1537 4.05309 14.3902 4.2182 14.597C4.40818 14.835 4.69628 14.9735 5.00082 14.9732C5.26547 14.9729 5.46897 14.8487 5.57392 14.7793C5.68366 14.7067 5.80847 14.6068 5.93093 14.5088L7.53968 13.2218C7.8854 12.9453 7.98804 12.8672 8.0947 12.8127C8.20168 12.758 8.31556 12.7181 8.43324 12.6939C8.55057 12.6699 8.6795 12.6667 9.12224 12.6667H10.8273C11.3639 12.6667 11.8068 12.6667 12.1676 12.6372C12.5424 12.6066 12.8868 12.5409 13.2104 12.3761C13.7121 12.1204 14.1201 11.7124 14.3758 11.2107C14.5406 10.8871 14.6063 10.5427 14.6369 10.1679C14.6664 9.80713 14.6664 9.36423 14.6664 8.82759V5.17249C14.6664 4.63585 14.6664 4.19295 14.6369 3.83216C14.6063 3.45743 14.5406 3.11296 14.3758 2.7894C14.1201 2.28763 13.7121 1.87969 13.2104 1.62402C12.8868 1.45916 12.5424 1.39345 12.1676 1.36284C11.8068 1.33336 11.3639 1.33337 10.8273 1.33337ZM8.99479 5.00004C8.99479 4.44776 9.44251 4.00004 9.99479 4.00004C10.5471 4.00004 10.9948 4.44776 10.9948 5.00004C10.9948 5.55233 10.5471 6.00004 9.99479 6.00004C9.44251 6.00004 8.99479 5.55233 8.99479 5.00004ZM4.92813 7.80008C5.22175 7.57986 5.63792 7.63849 5.85937 7.93064C5.90047 7.98307 5.94569 8.03241 5.99175 8.08048C6.08995 8.18295 6.23751 8.32196 6.42858 8.46092C6.81329 8.74071 7.34515 9.00008 7.9948 9.00008C8.64444 9.00008 9.17631 8.74071 9.56102 8.46092C9.75209 8.32196 9.89965 8.18295 9.99785 8.08048C10.0439 8.03242 10.0891 7.98306 10.1302 7.93064C10.3517 7.63849 10.7678 7.57986 11.0615 7.80008C11.356 8.02099 11.4157 8.43886 11.1948 8.73341C11.1965 8.73124 11.1925 8.73622 11.1857 8.74479C11.1695 8.76522 11.137 8.8061 11.1259 8.81929C11.0868 8.86587 11.0315 8.92896 10.9605 9.00302C10.8191 9.15055 10.6125 9.34486 10.3452 9.53924C9.81328 9.92612 9.01182 10.3334 7.9948 10.3334C6.97778 10.3334 6.17631 9.92612 5.64435 9.53924C5.37709 9.34486 5.17048 9.15055 5.0291 9.00302C4.95813 8.92896 4.9028 8.86587 4.8637 8.81929C4.84413 8.79597 4.82856 8.77671 4.81707 8.76219C4.58678 8.46467 4.61774 8.03288 4.92813 7.80008ZM5.99479 4.00004C5.44251 4.00004 4.99479 4.44776 4.99479 5.00004C4.99479 5.55233 5.44251 6.00004 5.99479 6.00004C6.54708 6.00004 6.99479 5.55233 6.99479 5.00004C6.99479 4.44776 6.54708 4.00004 5.99479 4.00004Z" fill="#06AED4"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.json b/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.json
new file mode 100644
index 0000000000..7810d9043b
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.json
@@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "message-smile-square"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Solid",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M10.8273 1.33337H5.17221C4.63556 1.33337 4.19265 1.33336 3.83185 1.36284C3.45712 1.39345 3.11265 1.45916 2.7891 1.62402C2.28733 1.87969 1.87938 2.28763 1.62372 2.7894C1.45886 3.11296 1.39315 3.45743 1.36253 3.83216C1.33306 4.19295 1.33306 4.63586 1.33307 5.17251L1.33304 9.42509C1.33275 9.95535 1.33254 10.3491 1.42394 10.6902C1.67052 11.6105 2.38931 12.3293 3.30955 12.5758C3.51453 12.6308 3.73853 12.6526 3.99974 12.6612L3.99974 13.5807C3.99971 13.7375 3.99967 13.8974 4.01157 14.0284C4.02296 14.1537 4.05309 14.3902 4.2182 14.597C4.40818 14.835 4.69628 14.9735 5.00082 14.9732C5.26547 14.9729 5.46897 14.8487 5.57392 14.7793C5.68366 14.7067 5.80847 14.6068 5.93093 14.5088L7.53968 13.2218C7.8854 12.9453 7.98804 12.8672 8.0947 12.8127C8.20168 12.758 8.31556 12.7181 8.43324 12.6939C8.55057 12.6699 8.6795 12.6667 9.12224 12.6667H10.8273C11.3639 12.6667 11.8068 12.6667 12.1676 12.6372C12.5424 12.6066 12.8868 12.5409 13.2104 12.3761C13.7121 12.1204 14.1201 11.7124 14.3758 11.2107C14.5406 10.8871 14.6063 10.5427 14.6369 10.1679C14.6664 9.80713 14.6664 9.36423 14.6664 8.82759V5.17249C14.6664 4.63585 14.6664 4.19295 14.6369 3.83216C14.6063 3.45743 14.5406 3.11296 14.3758 2.7894C14.1201 2.28763 13.7121 1.87969 13.2104 1.62402C12.8868 1.45916 12.5424 1.39345 12.1676 1.36284C11.8068 1.33336 11.3639 1.33337 10.8273 1.33337ZM8.99479 5.00004C8.99479 4.44776 9.44251 4.00004 9.99479 4.00004C10.5471 4.00004 10.9948 4.44776 10.9948 5.00004C10.9948 5.55233 10.5471 6.00004 9.99479 6.00004C9.44251 6.00004 8.99479 5.55233 8.99479 5.00004ZM4.92813 7.80008C5.22175 7.57986 5.63792 7.63849 5.85937 7.93064C5.90047 7.98307 5.94569 8.03241 5.99175 8.08048C6.08995 8.18295 6.23751 8.32196 6.42858 8.46092C6.81329 8.74071 7.34515 9.00008 7.9948 9.00008C8.64444 9.00008 9.17631 8.74071 9.56102 8.46092C9.75209 8.32196 9.89965 8.18295 9.99785 8.08048C10.0439 8.03242 10.0891 7.98306 10.1302 7.93064C10.3517 7.63849 10.7678 7.57986 11.0615 7.80008C11.356 8.02099 11.4157 8.43886 11.1948 8.73341C11.1965 8.73124 11.1925 8.73622 11.1857 8.74479C11.1695 8.76522 11.137 8.8061 11.1259 8.81929C11.0868 8.86587 11.0315 8.92896 10.9605 9.00302C10.8191 9.15055 10.6125 9.34486 10.3452 9.53924C9.81328 9.92612 9.01182 10.3334 7.9948 10.3334C6.97778 10.3334 6.17631 9.92612 5.64435 9.53924C5.37709 9.34486 5.17048 9.15055 5.0291 9.00302C4.95813 8.92896 4.9028 8.86587 4.8637 8.81929C4.84413 8.79597 4.82856 8.77671 4.81707 8.76219C4.58678 8.46467 4.61774 8.03288 4.92813 7.80008ZM5.99479 4.00004C5.44251 4.00004 4.99479 4.44776 4.99479 5.00004C4.99479 5.55233 5.44251 6.00004 5.99479 6.00004C6.54708 6.00004 6.99479 5.55233 6.99479 5.00004C6.99479 4.44776 6.54708 4.00004 5.99479 4.00004Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "MessageSmileSquare"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.tsx b/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.tsx
new file mode 100644
index 0000000000..1dfb106942
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/communication/MessageSmileSquare.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './MessageSmileSquare.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'MessageSmileSquare'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/communication/index.ts b/web/app/components/base/icons/src/vender/solid/communication/index.ts
index a49c36f50e..63d3fd423b 100644
--- a/web/app/components/base/icons/src/vender/solid/communication/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/communication/index.ts
@@ -4,4 +4,5 @@ export { default as EditList } from './EditList'
 export { default as MessageDotsCircle } from './MessageDotsCircle'
 export { default as MessageFast } from './MessageFast'
 export { default as MessageHeartCircle } from './MessageHeartCircle'
+export { default as MessageSmileSquare } from './MessageSmileSquare'
 export { default as Send03 } from './Send03'
diff --git a/web/app/components/workflow/panel/record.tsx b/web/app/components/workflow/panel/record.tsx
index 86c6e20586..dd7ef18861 100644
--- a/web/app/components/workflow/panel/record.tsx
+++ b/web/app/components/workflow/panel/record.tsx
@@ -1,9 +1,12 @@
+import Run from '../run'
+
 const Record = () => {
   return (
-    <div className='w-[400px] h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white'>
+    <div className='flex flex-col w-[400px] h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white'>
       <div className='p-4 pb-1 text-base font-semibold text-gray-900'>
         Test Run#5
       </div>
+      <Run activeTab='RESULT' appId='' />
     </div>
   )
 }