Playing with the layout

assets/style.css

@@ -3,18 +3,30 @@ body {
 }
 
 .magi {
-    display: flex;
+    height: 50vh;
+    display: grid;
+    grid-template-columns: 20px 2fr 20px 1fr 1fr 1fr 20px 2fr 20px;
+    grid-template-rows: 20px 1fr 1fr 1fr 20px 1fr 20px;
 }
 
 .magi>.wise-man {
-    border: 3px solid #ff8d00;
-    padding: 50px;
-    margin: 10px;
     font-family: Helvetica;
     font-size: 3em;
     font-weight: bold;
 }
 
+.magi>.wise-man.melchior {
+    grid-area: 4 / 6 / 7 / 9;
+}
+
+.magi>.wise-man.baltasar {
+    grid-area: 2 / 4 / 5 / 7;
+}
+
+.magi>.wise-man.casper {
+    grid-area: 4 / 2 / 7 /5;
+}
+
 .system-status {
     font-family: Helvetica;
     color: #ff8d00;

components/wise_man.js

@@ -19,10 +19,11 @@ function useColor(status, processing) {
 
 export default function WiseMan(props) {
     const { setProps, name, order_number, question_id, answer } = props;
-    const fullName = `${name} • ${order_number}`;
+    const fullName = `${name.toUpperCase()} • ${order_number}`;
     const color = useColor(answer['status'], question_id !== answer['id']);
 
-    return React.createElement('div', { className: 'wise-man', style: { background: color } }, [
+    return React.createElement('div', { className: `wise-man ${name}`, style: { background: color } }, 
+    [
         fullName
     ])
 }

main.py

@@ -7,21 +7,6 @@ import random
 
 app = Dash(__name__)
 
-
-@dataclass
-class WiseManDefinition:
-    id: str
-    name: str
-    order_number: int
-    system_prompt: str
-
-
-wise_man = [
-    WiseManDefinition(id='melchior', name='MELCHIOR', order_number=1, system_prompt='You are a wise man'),
-    WiseManDefinition(id='baltasar', name='BALTASAR', order_number=2, system_prompt='You are a wise man'),
-    WiseManDefinition(id='casper', name='CASPAR', order_number=3, system_prompt='You are a wise man'),
-]
-
 Magi = load_react_component(app, 'components', 'magi.js')
 WiseMan = load_react_component(app, 'components', 'wise_man.js')
 
@@ -37,9 +22,9 @@ app.layout = Magi(id='magi', children=[
             html.Div(id='extention', children='EXTENTION : ????'),
             html.Div(children='EX_MODE : OFF'),
             html.Div(children='PRIORITY : AAA')]),
-    WiseMan(id={'type': 'wise-man', 'name': 'melchior'}, name='MELCHIOR', order_number=1, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
-    WiseMan(id={'type': 'wise-man', 'name': 'baltasar'}, name='BALTASAR', order_number=2, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
-    WiseMan(id={'type': 'wise-man', 'name': 'casper'}, name='CASPAR', order_number=3, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
+    WiseMan(id={'type': 'wise-man', 'name': 'melchior'}, name='melchior', order_number=1, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
+    WiseMan(id={'type': 'wise-man', 'name': 'baltasar'}, name='baltasar', order_number=2, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
+    WiseMan(id={'type': 'wise-man', 'name': 'casper'}, name='casper', order_number=3, question_id=0, answer={'id': 0, 'response': 'yes', 'status': 'yes'}),
     dcc.Input(id='query', type='text', value='', debounce=True, autoComplete='off'),
 
     dcc.Store(id='question', data={'id': 0, 'query': ''}),