mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-09-22 09:26:35 +08:00
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
This commit is contained in:
committed by
GitHub
parent
d6e1e79f07
commit
b73847f1a6
@@ -8,12 +8,15 @@ export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
|
||||
return (
|
||||
<div className={`${styles.cardContainer}`}>
|
||||
<div className={`${styles.basicInfoContainer}`}>
|
||||
<div className={`${styles.basicInfoNameContainer}`}>
|
||||
<div className={`${styles.basicInfoNameText} ${styles.bigText}`}>
|
||||
{cardVO.name}
|
||||
</div>
|
||||
<div className={`${styles.basicInfoDescriptionText}`}>
|
||||
{cardVO.description}
|
||||
<div className={`${styles.iconBasicInfoContainer}`}>
|
||||
<div className={`${styles.iconEmoji}`}>{cardVO.emoji || '⚙️'}</div>
|
||||
<div className={`${styles.basicInfoNameContainer}`}>
|
||||
<div className={`${styles.basicInfoNameText} ${styles.bigText}`}>
|
||||
{cardVO.name}
|
||||
</div>
|
||||
<div className={`${styles.basicInfoDescriptionText}`}>
|
||||
{cardVO.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -33,8 +36,8 @@ export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.operationContainer}>
|
||||
{cardVO.isDefault && (
|
||||
{cardVO.isDefault && (
|
||||
<div className={styles.operationContainer}>
|
||||
<div className={styles.operationDefaultBadge}>
|
||||
<svg
|
||||
className={styles.operationDefaultBadgeIcon}
|
||||
@@ -48,8 +51,8 @@ export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
|
||||
{t('pipelines.defaultBadge')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ export interface IPipelineCardVO {
|
||||
description: string;
|
||||
lastUpdatedTimeAgo: string;
|
||||
isDefault: boolean;
|
||||
emoji?: string;
|
||||
}
|
||||
|
||||
export class PipelineCardVO implements IPipelineCardVO {
|
||||
@@ -12,6 +13,7 @@ export class PipelineCardVO implements IPipelineCardVO {
|
||||
name: string;
|
||||
lastUpdatedTimeAgo: string;
|
||||
isDefault: boolean;
|
||||
emoji?: string;
|
||||
|
||||
constructor(props: IPipelineCardVO) {
|
||||
this.id = props.id;
|
||||
@@ -19,5 +21,6 @@ export class PipelineCardVO implements IPipelineCardVO {
|
||||
this.description = props.description;
|
||||
this.lastUpdatedTimeAgo = props.lastUpdatedTimeAgo;
|
||||
this.isDefault = props.isDefault;
|
||||
this.emoji = props.emoji;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user