style(card): fix bot card padding & shadow (#264)

1. Standardize the first card style in the space and market.
2. Fix the text overflow issue in the Thoughtchain component.

client/app/factory/list/components/BotCard.tsx

@@ -142,7 +142,7 @@ const BotCard = (props: { bot: Bot }) => {
             </div>
           </div>
         </CardBody>
-        <CardFooter className="text-small justify-between flex-col mt-4 p-0 px-3 h-[84px]">
+        <CardFooter className="text-small justify-between flex-col my-4 p-0 px-3 h-[84px]">
           <div className="flex w-full text-small justify-between pb-2">
             <span className="leading-8 h-8 font-semibold text-2xl whitespace-nowrap overflow-hidden text-ellipsis">
               {bot.name}

client/app/factory/list/page.tsx

@@ -3,19 +3,20 @@ import { Tables } from '@/types/database.types';
 import React from 'react';
 import { isEmpty, map } from 'lodash';
 import BotCard from './components/BotCard';
-import AddBotCard from './components/AddBotCard';
 
 import { useBotList } from '@/app/hooks/useBot';
 
 import FullPageSkeleton from '@/components/FullPageSkeleton';
 import { useSearch } from '@/app/contexts/SearchContext';
+import AddBotCard from '@/components/AddBotCard';
+import { useRouter } from 'next/navigation';
 
 declare type Bot = Tables<'bots'>;
 
 export default function List() {
   const { search } = useSearch();
   let { data: bots, isLoading, error } = useBotList(true, search);
-
+  const router = useRouter();
   if (isLoading) {
     return <FullPageSkeleton />;
   }
@@ -25,7 +26,11 @@ export default function List() {
 
   return (
     <div className="grid grid-flow-row-dense gap-8 justify-items-center px-[40px] grid-cols-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-      <AddBotCard />
+      <AddBotCard
+        onPress={() => {
+          router.push(`/factory/edit/new`);
+        }}
+      />
       {!isEmpty(bots) &&
         map(bots, (bot: Bot) => <BotCard key={bot.id} bot={bot} />)}
     </div>

client/app/page.tsx

@@ -5,10 +5,10 @@ import { isEmpty, map } from 'lodash';
 import BotCard from '@/components/BotCard';
 import { useBotList } from '@/app/hooks/useBot';
 import FullPageSkeleton from '@/components/FullPageSkeleton';
-import BotList from '@/components/BotList';
 import { useSearch } from '@/app/contexts/SearchContext';
 import { Assistant } from 'petercat-lui';
 import { useFingerprint } from './hooks/useFingerprint';
+import PublishBotEntity from '@/components/PublishBotEntity';
 
 declare type Bot = Tables<'bots'>;
 
@@ -66,7 +66,7 @@ export default function Home() {
   return (
     <div>
       <div className="grid grid-flow-row-dense gap-8 justify-items-center px-[40px] grid-cols-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-        <BotList type="list" />
+        <PublishBotEntity type="list" />
         {!isEmpty(bots) &&
           map(bots, (bot: Bot) => (
             <BotCard key={bot.id} bot={bot} handleCardClick={handleCardClick} />

client/components/AddBotCard.tsx

@@ -1,22 +1,21 @@
 'use client';
 import React from 'react';
-import { Card, CardBody } from '@nextui-org/react';
+import { CardBody } from '@nextui-org/react';
 import { AddBotIcon } from '@/public/icons/AddBotIcon';
-const BotCard = (props: { onPress: Function }) => {
+import BaseBotCard from './BaseBotCard';
+
+const AddBotCard = (props: { onPress: Function }) => {
   return (
-    <Card
-      className="border-none w-full max-h-[400px] bg-[#FFF] rounded-[16px] p-2 h-[384px] rounded-[8px]"
-      shadow="none"
-      isPressable
+    <BaseBotCard
       onPress={() => {
         props.onPress();
       }}
     >
       <CardBody className="overflow-visible p-0 bg-gradient-to-b from-[rgba(255,255,255,0.65)] to-white bg-[#F3F4F6] h-[400px] flex justify-center items-center rounded-[8px]">
         <AddBotIcon className="" />
       </CardBody>
-    </Card>
+    </BaseBotCard>
   );
 };
 
-export default BotCard;
+export default AddBotCard;

client/components/BaseBotCard.tsx

@@ -0,0 +1,23 @@
+'use client';
+import React from 'react';
+import { Card, CardBody } from '@nextui-org/react';
+
+const BaseBotCard = (props: {
+  onPress: Function;
+  children: React.ReactNode;
+}) => {
+  return (
+    <Card
+      className="border-none w-full max-h-[400px] bg-[#FFF] rounded-[16px] p-2 h-[384px] rounded-[8px]"
+      shadow="none"
+      isPressable
+      onPress={() => {
+        props.onPress();
+      }}
+    >
+      {props.children}
+    </Card>
+  );
+};
+
+export default BaseBotCard;

client/components/BotCard.tsx

@@ -44,7 +44,7 @@ const BotCard = (props: {
           <Image src="./images/chat.svg" />
         </div>
       </CardBody>
-      <CardFooter className="text-small justify-between flex-col mt-4 p-0 px-3 min-h-[84px]">
+      <CardFooter className="text-small justify-between flex-col my-4 p-0 px-3 min-h-[84px]">
         <div className="flex w-full text-small justify-between pb-2">
           <span className="leading-8 h-8 font-semibold text-2xl whitespace-nowrap overflow-hidden text-ellipsis">
             {bot.name}

client/components/Navbar.tsx

@@ -8,7 +8,7 @@ import { ShopIcon } from '@/public/icons/ShopIcon';
 import { SpaceIcon } from '@/public/icons/SpaceIcon';
 import { SearchIcon } from '@/public/icons/SearchIcon';
 import { AddIcon } from '@/public/icons/AddIcon';
-import BotList from './BotList';
+import PublishBotEntity from './PublishBotEntity';
 import { useSearch } from '@/app/contexts/SearchContext';
 
 export function Navbar() {
@@ -113,7 +113,7 @@ export function Navbar() {
         />
       </div>
       <div className="w-[200px] ml-[48px] flex items-center">
-        {!pathname.includes('/factory/list') && <BotList type="nav" />}
+        {!pathname.includes('/factory/list') && <PublishBotEntity type="nav" />}
         {pathname.includes('/factory/list') && (
           <Button
             onPress={() => router.push(`/factory/edit/new`)}

client/components/BotList.tsx → client/components/PublishBotEntity.tsx

@@ -23,7 +23,7 @@ import 'react-toastify/dist/ReactToastify.css';
 
 declare type Bot = Tables<'bots'>;
 
-const BotList = (props: { type: 'nav' | 'list' }) => {
+const PublishBotEntity = (props: { type: 'nav' | 'list' }) => {
   const { type } = props;
   const [selectedBot, setSelectedBot] = useState('');
   const [selectedBotName, setSelectedBotName] = useState('');
@@ -126,4 +126,4 @@ const BotList = (props: { type: 'nav' | 'list' }) => {
   );
 };
 
-export default BotList;
+export default PublishBotEntity;

lui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "petercat-lui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "A react library developed with dumi",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -99,5 +99,6 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1"
-  }
+  },
+  "repository": "https://github.com/petercat-ai/petercat.git"
 }

lui/src/ThoughtChain/index.tsx

@@ -75,7 +75,9 @@ const ThoughtChain: React.FC<ThoughtChainProps> = (params) => {
             {JSON.stringify(safeJsonParse(content?.data), null, 2)}
           </Highlight>
         ) : (
-          <>{content?.data}</>
+          <Highlight language="text" theme="light" type="block">
+            {content?.data}
+          </Highlight>
         ),
       },
     ];