perf: empty base ui dark color adjustment etc

Author: caoxing9

apps/nextjs-app/src/features/app/base/ChatPage/PromptBox.tsx

@@ -439,10 +439,10 @@ export const PromptBox: React.FC<IPromptBoxProps> = ({ onEnter }) => {
         },
       ],
     },
-  ];
+  ] as const;
   return (
     <div className="mx-auto flex w-full justify-center px-4 sm:px-6 lg:px-8">
-      <div className="shadow-black/6 w-full max-w-3xl rounded-2xl border border-gray-200 bg-card p-4 text-left shadow-sm">
+      <div className="shadow-black/6 w-full max-w-3xl rounded-2xl border bg-card p-4 text-left shadow-sm">
         <div className="relative space-y-2 rounded-2xl bg-muted px-6 py-3">
           <textarea
             id="prompt-box"
@@ -493,7 +493,7 @@ export const PromptBox: React.FC<IPromptBoxProps> = ({ onEnter }) => {
                   <Button
                     variant={'ghost'}
                     size={'xs'}
-                    className="flex items-center gap-1 rounded-md bg-muted/30 p-1 py-1.5 text-xs transition-colors "
+                    className="bg-sc flex items-center gap-1 rounded-md bg-secondary/50 p-1 py-1.5 text-xs transition-colors"
                   >
                     <ChevronRight className="size-3" />
                     <span className="text-xs">{suggestion.title}</span>

apps/nextjs-app/src/features/app/base/ChatPage/Template.tsx

@@ -111,9 +111,7 @@ export const Template: React.FC<TemplateProps> = ({ initialTemplates: templates,
       <div className="relative mx-auto flex w-full max-w-[1158px] flex-col items-center justify-start gap-2 p-4 sm:px-6 lg:px-8">
         {/* Title */}
         <div className="flex items-start justify-start self-stretch">
-          <h1 className="text-2xl font-bold text-[#121827]">
-            {t('common:template.templateTitle')}
-          </h1>
+          <h1 className="text-2xl font-bold">{t('common:template.templateTitle')}</h1>
         </div>
 
         {/* Filter and Sort Header */}
@@ -127,10 +125,10 @@ export const Template: React.FC<TemplateProps> = ({ initialTemplates: templates,
                 size="xs"
                 onClick={() => setActiveCategory(category.id)}
                 className={cn(
-                  'flex justify-center items-center relative gap-1 px-3 py-2 rounded-lg border border-gray-200 transition-all duration-200 hover:bg-gray-50',
-                  activeCategory === category.id
-                    ? 'bg-gray-50 border-gray-200'
-                    : 'bg-white hover:bg-gray-25'
+                  'flex justify-center items-center relative gap-1 px-3 py-2 rounded-lg border transition-all duration-200 text-card-foreground bg-card',
+                  {
+                    'text-card-foreground bg-secondary': activeCategory === category.id,
+                  }
                 )}
               >
                 <p className="text-left text-xs">{category.name}</p>

apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/ViewListDiffPreview.tsx

@@ -26,7 +26,14 @@ const ViewItem = (props: {
   options?: IViewOptions;
   style?: React.CSSProperties;
   changeViewIdId?: string;
-  views: IViewVo[];
+  views: {
+    id: string;
+    name: string;
+    type: ViewType;
+    isLocked?: boolean;
+    options?: IViewOptions;
+    style?: React.CSSProperties;
+  }[];
 }) => {
   const { id, name, type, isLocked, style, options, changeViewIdId, views } = props;
   const ref = useRef<HTMLButtonElement>(null);
@@ -46,6 +53,8 @@ const ViewItem = (props: {
 
   const isExpired = !views.find((view) => view.id === id);
 
+  console.log('ViewItemViewItemViewItem', views, currentViewId);
+
   return (
     <Button
       style={style}
@@ -218,7 +227,7 @@ export const ViewListDiffPreview = (props: IViewListPreviewProps) => {
   return (
     <div className="flex gap-2 overflow-x-auto p-2">
       {viewList.map((view) => (
-        <ViewItem key={view.id} {...view} changeViewIdId={changeViewIdId} views={views} />
+        <ViewItem key={view.id} {...view} changeViewIdId={changeViewIdId} views={viewList} />
       ))}
     </div>
   );

apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatContainer.tsx

@@ -35,6 +35,7 @@ export const ChatContainer = forwardRef<
   const chatIdRef = useRef(generateChatId());
   const { modelKey, setModelKey } = useChatStore();
   const tableIdRef = useRef<string | undefined>();
+  const viewIdRef = useRef<string | undefined>();
   const activeChat = useActiveChat(baseId);
   const queryClient = useQueryClient();
   const chatContext = useChatContext();
@@ -48,6 +49,10 @@ export const ChatContainer = forwardRef<
     tableIdRef.current = tableId;
   }, [tableId]);
 
+  useEffect(() => {
+    viewIdRef.current = router.query.viewId as string | undefined;
+  }, [router.query.viewId]);
+
   const { data: baseAiConfig, isLoading: isBaseAiConfigLoading } = useQuery({
     queryKey: ['ai-config', baseId],
     queryFn: () => getAIConfig(baseId).then(({ data }) => data),
@@ -157,6 +162,52 @@ export const ChatContainer = forwardRef<
             }
             break;
           }
+          case McpToolInvocationName.CreateView: {
+            setTimeout(() => {
+              const { toolCallId } = toolCall;
+              const { tableId } = toolCall.args as { tableId: string };
+              const partItem = messagesRef?.current
+                ?.map(({ parts }) => parts)
+                .flat()
+                ?.find(
+                  (part) =>
+                    (part as unknown as IToolInvocationUIPart)?.toolInvocation?.toolCallId ===
+                    toolCallId
+                );
+              const toolInvocation = (partItem as IToolInvocationUIPart)?.toolInvocation;
+              if (!toolInvocation) {
+                return;
+              }
+              let createdViewId: string | undefined;
+              try {
+                const { result } = toolInvocation;
+                const createdView = JSON.parse(result?.content?.[0]?.text);
+                createdViewId = createdView?.view.id;
+              } catch (error) {
+                console.error('parse created table error', error);
+              }
+              if (!createdViewId) {
+                return;
+              }
+              if (createdViewId !== currentTableId) {
+                router.push(
+                  {
+                    pathname: `/base/[baseId]/[tableId]/[viewId]`,
+                    query: {
+                      baseId,
+                      tableId,
+                      viewId: createdViewId,
+                    },
+                  },
+                  undefined,
+                  {
+                    shallow: Boolean(currentTableId),
+                  }
+                );
+              }
+            }, 3000);
+            break;
+          }
           case McpToolInvocationName.CreateTable: {
             setTimeout(() => {
               const { toolCallId } = toolCall;
@@ -177,7 +228,9 @@ export const ChatContainer = forwardRef<
                 const { result } = toolInvocation;
                 const createdTable = JSON.parse(result?.content?.[0]?.text);
                 createdTableId = createdTable?.table.id;
+                console.log('createdTablecreatedTablecreatedTable', createdTable);
               } catch (error) {
+                console.error('createdTablecreatedTablecreatedTable', error);
                 console.error('parse created table error', error);
               }
               if (!createdTableId) {