From 1a1533530ceab2af5ce2fb5a709a61dede4bea2b Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Tue, 2 May 2023 19:10:24 -0400
Subject: [PATCH] Use Mantine badges for prompt var labels

---
 chain-forge/src/PromptNode.js             | 6 ++++--
 chain-forge/src/TemplateHooksComponent.js | 5 +++--
 chain-forge/src/text-fields-node.css      | 5 +++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/chain-forge/src/PromptNode.js b/chain-forge/src/PromptNode.js
index 2ff8e19..07aa717 100644
--- a/chain-forge/src/PromptNode.js
+++ b/chain-forge/src/PromptNode.js
@@ -12,7 +12,8 @@ const llmItems = [
     { model: "GPT3.5", emoji: "🙂", temp: 1.0 },
     { model: "GPT4", emoji: "🥵", temp: 1.0 },
     { model: "Alpaca 7B", emoji: "🦙", temp: 0.5 },
-    { model: "Claude v1", emoji: "📚", temp: 0.5 }
+    { model: "Claude v1", emoji: "📚", temp: 0.5 },
+    { model: "Ian Chatbot", emoji: "💩", temp: 0.5 }
 ];
 
 // Helper funcs
@@ -286,12 +287,13 @@ const PromptNode = ({ data, id }) => {
         />
       </div>
       <TemplateHooks vars={templateVars} nodeId={id} startY={140} />
+      <hr />
       <div>
         <div style={{marginBottom: '10px', padding: '4px'}}>
             <label htmlFor="num-generations" style={{fontSize: '10pt'}}>Num responses per prompt:&nbsp;</label>
             <input id="num-generations" name="num-generations" type="number" min={1} max={50} defaultValue={data.n || 1} onChange={handleNumGenChange} className="nodrag"></input>
         </div>
-        <div id="llms-list" style={{backgroundColor: '#eee', padding: '8px', boxShadow: 'inset 0 0 30px #fff'}}>
+        <div id="llms-list" className="nowheel" style={{backgroundColor: '#eee', padding: '8px', boxShadow: 'inset 0 0 30px #fff', overflowY: 'auto', maxHeight: '220px'}}>
             <div style={{marginTop: '6px', marginBottom: '6px', marginLeft: '6px', paddingBottom: '4px', textAlign: 'left', fontSize: '10pt', color: '#777'}}>
                 Models to query:
                 <div className="add-llm-model-btn nodrag">
diff --git a/chain-forge/src/TemplateHooksComponent.js b/chain-forge/src/TemplateHooksComponent.js
index 8589f47..d3f19dc 100644
--- a/chain-forge/src/TemplateHooksComponent.js
+++ b/chain-forge/src/TemplateHooksComponent.js
@@ -1,16 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Handle } from 'react-flow-renderer';
+import { Badge } from '@mantine/core';
 import useStore from './store'
 
 export default function TemplateHooks({ vars, nodeId, startY }) {
 
     const genTemplateHooks = useCallback((temp_var_names, names_to_blink) => {
         return temp_var_names.map((name, idx) => {
-            const className = (names_to_blink.includes(name)) ? 'text-blink' : '';
+            const className = (names_to_blink.includes(name)) ? 'hook-tag text-blink' : 'hook-tag';
             const pos = (idx * 35) + startY + 'px';
             const style = { top: pos,  background: '#555' };
             return (<div key={name} className={className} >
-                <p>{name}</p>
+                <Badge color="indigo" size="md" radius="sm">{name}</Badge>
                 <Handle type="target" position="left" id={name} style={style} />
             </div>)
         });
diff --git a/chain-forge/src/text-fields-node.css b/chain-forge/src/text-fields-node.css
index 4a6fce6..2d428f6 100644
--- a/chain-forge/src/text-fields-node.css
+++ b/chain-forge/src/text-fields-node.css
@@ -203,6 +203,11 @@
     font-family: 'Courier New', Courier, monospace;
   }
 
+  .hook-tag {
+    padding-top: 11px;;
+    padding-bottom: 3px;
+  }
+
   .code-mirror-field-header {
     font-size: 10pt;
     color: #333;