Feat: Modify the style of the agent operator form #10703 (#10821)

### What problem does this PR solve?

Feat: Modify the style of the agent operator form #10703

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form/components/prompt-editor/index.css

@@ -1,5 +1,4 @@
 .typeahead-popover {
-  background: #fff;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   position: fixed;
@@ -10,16 +9,6 @@
   list-style: none;
   margin: 0;
   max-height: 200px;
-  overflow-y: scroll;
-}
-
-.typeahead-popover ul::-webkit-scrollbar {
-  display: none;
-}
-
-.typeahead-popover ul {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
 }
 
 .typeahead-popover ul li {
@@ -28,7 +17,6 @@
   font-size: 14px;
   outline: none;
   cursor: pointer;
-  border-radius: 8px;
 }
 
 .typeahead-popover ul li.selected {
@@ -37,7 +25,6 @@
 
 .typeahead-popover li {
   margin: 0 8px 0 8px;
-  color: #050505;
   cursor: pointer;
   line-height: 16px;
   font-size: 15px;
@@ -45,7 +32,6 @@
   align-content: center;
   flex-direction: row;
   flex-shrink: 0;
-  background-color: #fff;
   border: 0;
 }
 

web/src/pages/agent/form/components/prompt-editor/index.tsx

@@ -89,7 +89,7 @@ function PromptContent({
 
   return (
     <section
-      className={cn('border rounded-sm ', { 'border-blue-400': !isBlur })}
+      className={cn('border rounded-sm ', { 'border-accent-primary': !isBlur })}
     >
       {showToolbar && (
         <div className="border-b px-2 py-2 justify-end flex">
@@ -107,7 +107,7 @@ function PromptContent({
       )}
       <ContentEditable
         className={cn(
-          'relative px-2 py-1 focus-visible:outline-none max-h-[50vh] overflow-auto',
+          'relative px-2 py-1 focus-visible:outline-none max-h-[50vh] overflow-auto text-sm',
           {
             'min-h-40': multiLine,
           },
@@ -163,7 +163,7 @@ export function PromptEditor({
           placeholder={
             <div
               className={cn(
-                'absolute top-1 left-2 text-text-secondary pointer-events-none',
+                'absolute top-1 left-2 text-text-disabled pointer-events-none',
                 {
                   'truncate w-[90%]': !multiLine,
                   'translate-y-10': multiLine,

web/src/pages/agent/form/components/prompt-editor/variable-node.tsx

@@ -49,7 +49,7 @@ export class VariableNode extends DecoratorNode<ReactNode> {
 
   decorate(): ReactNode {
     let content: ReactNode = (
-      <div className="text-blue-600">{this.__label}</div>
+      <div className="text-accent-primary">{this.__label}</div>
     );
     if (this.__parentLabel) {
       content = (
@@ -62,7 +62,7 @@ export class VariableNode extends DecoratorNode<ReactNode> {
       );
     }
     return (
-      <div className="bg-gray-200 dark:bg-gray-400 text-sm inline-flex items-center rounded-md px-2 py-1">
+      <div className="bg-accent-primary-5 text-sm inline-flex items-center rounded-md px-2 py-1">
         {content}
       </div>
     );

web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx

@@ -91,13 +91,13 @@ function VariablePickerMenuItem({
       id={'typeahead-item-' + index}
     >
       <div>
-        <span className="text text-slate-500">{option.title}</span>
+        <span className="text text-text-secondary">{option.title}</span>
         <ul className="pl-2 py-1">
           {option.options.map((x) => (
             <li
               key={x.value}
               onClick={() => selectOptionAndCleanUp(x)}
-              className="hover:bg-slate-300 p-1"
+              className="hover:bg-bg-card p-1 text-text-primary rounded-sm"
             >
               {x.label}
             </li>
@@ -335,8 +335,8 @@ export default function VariablePickerMenuPlugin({
         const nextOptions = buildNextOptions();
         return anchorElementRef.current && nextOptions.length
           ? ReactDOM.createPortal(
-              <div className="typeahead-popover w-[200px] p-2">
-                <ul className="overflow-y-auto !scrollbar-thin overflow-x-hidden">
+              <div className="typeahead-popover w-[200px] p-2 bg-bg-base">
+                <ul className="scroll-auto overflow-x-hidden">
                   {nextOptions.map((option, i: number) => (
                     <VariablePickerMenuItem
                       index={i}