feat: add emoji support to knowledge bases and pipelines (#1935)

* feat: add emoji support to knowledge bases and pipelines

* feat: add optional emoji property to ExternalKBCardVO for enhanced knowledge base representation

web/src/app/home/knowledge/components/kb-card/KBCard.module.css

@@ -4,7 +4,7 @@
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
-  padding: 1.2rem;
+  padding: 1rem;
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -32,14 +32,41 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: 0.4rem;
+  gap: 0.5rem;
   min-width: 0;
 }
 
+.iconEmoji {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.75rem;
+  flex-shrink: 0;
+}
+
+:global(.dark) .iconEmoji {
+  background-color: #2a2a2d;
+}
+
+.iconBasicInfoContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
+  align-items: flex-start;
+  min-width: 0;
+  flex: 1;
+}
+
 .basicInfoNameContainer {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
+  min-width: 0;
+  flex: 1;
 }
 
 .basicInfoNameText {

web/src/app/home/knowledge/components/kb-card/KBCard.tsx

@@ -7,12 +7,15 @@ export default function KBCard({ kbCardVO }: { kbCardVO: KnowledgeBaseVO }) {
   return (
     <div className={`${styles.cardContainer}`}>
       <div className={`${styles.basicInfoContainer}`}>
-        <div className={`${styles.basicInfoNameContainer}`}>
-          <div className={`${styles.basicInfoNameText}  ${styles.bigText}`}>
-            {kbCardVO.name}
-          </div>
-          <div className={`${styles.basicInfoDescriptionText}`}>
-            {kbCardVO.description}
+        <div className={`${styles.iconBasicInfoContainer}`}>
+          <div className={`${styles.iconEmoji}`}>{kbCardVO.emoji || '📚'}</div>
+          <div className={`${styles.basicInfoNameContainer}`}>
+            <div className={`${styles.basicInfoNameText}  ${styles.bigText}`}>
+              {kbCardVO.name}
+            </div>
+            <div className={`${styles.basicInfoDescriptionText}`}>
+              {kbCardVO.description}
+            </div>
           </div>
         </div>
 

web/src/app/home/knowledge/components/kb-card/KBCardVO.ts

@@ -5,6 +5,7 @@ export interface IKnowledgeBaseVO {
   embeddingModelUUID: string;
   top_k: number;
   lastUpdatedTimeAgo: string;
+  emoji?: string;
 }
 
 export class KnowledgeBaseVO implements IKnowledgeBaseVO {
@@ -14,6 +15,7 @@ export class KnowledgeBaseVO implements IKnowledgeBaseVO {
   embeddingModelUUID: string;
   top_k: number;
   lastUpdatedTimeAgo: string;
+  emoji?: string;
 
   constructor(props: IKnowledgeBaseVO) {
     this.id = props.id;
@@ -22,5 +24,6 @@ export class KnowledgeBaseVO implements IKnowledgeBaseVO {
     this.embeddingModelUUID = props.embeddingModelUUID;
     this.top_k = props.top_k;
     this.lastUpdatedTimeAgo = props.lastUpdatedTimeAgo;
+    this.emoji = props.emoji;
   }
 }