add support for text color for text component event

Author: sanchitrk

backend/models/event.go

@@ -60,6 +60,26 @@ func (ts TextSize) IsValid() bool {
 	}
 }
 
+// TextColor Represents text color for the text component.
+type TextColor string
+
+const (
+	TextNormal  TextColor = "NORMAL"
+	TextMuted   TextColor = "MUTED"
+	TextWarning TextColor = "WARNING"
+	TextError   TextColor = "ERROR"
+	TextSuccess TextColor = "SUCCESS"
+)
+
+func (tc TextColor) IsValid() bool {
+	switch tc {
+	case TextNormal, TextMuted, TextWarning, TextError, TextSuccess:
+		return true
+	default:
+		return false
+	}
+}
+
 type SpacerSize string
 
 const (
@@ -127,8 +147,9 @@ func (bc BadgeColor) IsValid() bool {
 
 // ComponentText represents the component text in event components.
 type ComponentText struct {
-	Text     string   `json:"text"`
-	TextSize TextSize `json:"textSize"`
+	Text      string    `json:"text"`
+	TextSize  TextSize  `json:"textSize"`
+	TextColor TextColor `json:"textColor"`
 }
 
 // UnmarshalJSON implements the json.Unmarshaler interface for ComponentText.
@@ -138,8 +159,9 @@ type ComponentText struct {
 // Returns an error if JSON unmarshal fails or if textSize is invalid.
 func (ct *ComponentText) UnmarshalJSON(data []byte) error {
 	type Aux struct {
-		Text     string `json:"text"`
-		TextSize string `json:"textSize"`
+		Text      string `json:"text"`
+		TextSize  string `json:"textSize"`
+		TextColor string `json:"textColor"`
 	}
 
 	var aux Aux
@@ -158,6 +180,16 @@ func (ct *ComponentText) UnmarshalJSON(data []byte) error {
 		}
 		ct.TextSize = ts
 	}
+	// Set default value to 'NORMAL' if textColor is empty
+	if aux.TextColor == "" {
+		ct.TextColor = TextNormal
+	} else {
+		tc := TextColor(aux.TextColor)
+		if !tc.IsValid() {
+			return fmt.Errorf("invalid textColor value: %s", aux.TextColor)
+		}
+		ct.TextColor = tc
+	}
 	return nil
 }
 

frontend/src/components/event/components.tsx

@@ -19,20 +19,36 @@ import Markdown from "react-markdown";
 
 type TextSize = "L" | "M" | "S" | "XS";
 
+type TextColor = "ERROR" | "MUTED" | "NORMAL" | "SUCCESS" | "WARNING";
+
 interface ComponentTextProps {
   text: string;
+  textColor?: TextColor;
   textSize?: TextSize;
 }
 
-// Renders markdown text component.
-export function ComponentText({ text, textSize = "S" }: ComponentTextProps) {
+// Renders Markdown text component.
+export function ComponentText({
+  text,
+  textColor = "NORMAL",
+  textSize = "S",
+}: ComponentTextProps) {
+
   const sizeMap: Record<TextSize, string> = {
     L: "text-lg",
     M: "text-base",
     S: "text-sm",
     XS: "text-xs",
   };
 
+  const colorMap: Record<TextColor, string> = {
+    ERROR: "text-red-600 dark:text-red-400",
+    MUTED: "text-muted-foreground",
+    NORMAL: "text-gray-900 dark:text-gray-100",
+    SUCCESS: "text-green-600 dark:text-green-400",
+    WARNING: "text-yellow-600 dark:text-yellow-400",
+  };
+
   return (
     <Markdown
       components={{
@@ -46,7 +62,11 @@ export function ComponentText({ text, textSize = "S" }: ComponentTextProps) {
         h3: ({ children }) => <h3 className="text-base">{children}</h3>,
         h4: ({ children }) => <h4 className="text-base">{children}</h4>,
         p: ({ children }) => (
-          <p className={sizeMap[textSize] || "text-sm"}>{children}</p>
+          <p
+            className={cn(sizeMap[textSize] || "text-sm", colorMap[textColor])}
+          >
+            {children}
+          </p>
         ),
         pre: ({ children }) => (
           <pre className="max-w-full overflow-auto whitespace-pre-wrap break-words">
@@ -259,7 +279,6 @@ export function RenderComponents({ components = [] }: RenderComponentsProps) {
       console.warn(`Unknown component type: ${componentType}`);
       return null;
     }
-
     return <Component key={index} {...props} />;
   };
 

frontend/src/db/schema.ts

@@ -207,6 +207,7 @@ export type PatResponse = z.infer<typeof patResponseSchema>;
 const ComponentText = z.object({
   componentText: z.object({
     text: z.string(),
+    textColor: z.string(),
     textSize: z.string(),
   }),
 });