From 126eacb9c882f93018ba6b950a28c739e48aa422 Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Mon, 15 May 2023 19:35:18 -0400
Subject: [PATCH] Make LLM badge color match bg color

---
 chain-forge/src/InspectorNode.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/chain-forge/src/InspectorNode.js b/chain-forge/src/InspectorNode.js
index 0828f40..c52f30b 100644
--- a/chain-forge/src/InspectorNode.js
+++ b/chain-forge/src/InspectorNode.js
@@ -68,7 +68,9 @@ const InspectorNode = ({ data, id }) => {
 
     // Assign a color to each LLM in responses
     const llm_colors = ['#ace1aeb1', '#f1b963b1', '#e46161b1', '#f8f398b1', '#defcf9b1', '#cadefcb1', '#c3bef0b1', '#cca8e9b1'];
+    const llm_badge_colors = ['green', 'orange', 'red', 'yellow', 'cyan', 'indigo', 'grape'];
     const color_for_llm = (llm) => llm_colors[found_llms.indexOf(llm) % llm_colors.length];
+    const badge_color_for_llm = (llm) => llm_badge_colors[found_llms.indexOf(llm) % llm_badge_colors.length];
     const response_box_colors = ['#ddd', '#eee', '#ddd', '#eee'];
     const rgroup_color = (depth) => response_box_colors[depth % response_box_colors.length];
 
@@ -137,7 +139,7 @@ const InspectorNode = ({ data, id }) => {
                                                 ? groupResponsesBy(resps, (r => r.llm)) 
                                                 : groupResponsesBy(resps, (r => ((group_name in r.vars) ? r.vars[group_name] : null)));
         const get_header = (group_name === 'LLM') 
-                            ? ((key, val) => (<Badge key={val} color="violet" size="sm">{val}</Badge>))
+                            ? ((key, val) => (<Badge key={val} color={badge_color_for_llm(val)} size="sm">{val}</Badge>))
                             : ((key, val) => getHeaderBadge(key, val));
         
         // Now produce nested divs corresponding to the groups