From 5d692e84d9c27e311bb4f470a0b43ecc9cdf08fc Mon Sep 17 00:00:00 2001
From: Sean Chalmers <42610534+AQUASINE@users.noreply.github.com>
Date: Tue, 16 Apr 2024 21:17:01 -0400
Subject: [PATCH 1/4] feat: rule card improvements

---
 src/components/AlwaysRuleContent.vue          | 12 ++++
 src/components/DefaultRuleContent.vue         | 10 +++
 src/components/MessagesView.vue               |  6 +-
 src/components/PresentationModeCenterView.vue |  5 +-
 src/components/PrimaryCenterView.vue          |  1 +
 ...gexConfigCard.vue => RegexRuleContent.vue} |  7 ---
 src/components/RuleConfigCard.vue             | 63 +++++++++++++++++++
 src/components/RuleTile.vue                   | 25 +++++---
 src/rules.js                                  |  2 +-
 src/store/store.js                            | 13 +++-
 10 files changed, 123 insertions(+), 21 deletions(-)
 create mode 100644 src/components/AlwaysRuleContent.vue
 create mode 100644 src/components/DefaultRuleContent.vue
 rename src/components/{RegexConfigCard.vue => RegexRuleContent.vue} (89%)
 create mode 100644 src/components/RuleConfigCard.vue

diff --git a/src/components/AlwaysRuleContent.vue b/src/components/AlwaysRuleContent.vue
new file mode 100644
index 0000000..668afb1
--- /dev/null
+++ b/src/components/AlwaysRuleContent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    Always is the default behavior. Change the rule to something else to have the action run conditionally.
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/DefaultRuleContent.vue b/src/components/DefaultRuleContent.vue
new file mode 100644
index 0000000..732f611
--- /dev/null
+++ b/src/components/DefaultRuleContent.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    This is the default rule content. If you are seeing this, then the selected rule has not yet been implemented.
+  </div>
+</template>
+<script>
+export default {
+  name: 'DefaultRuleContent'
+}
+</script>
\ No newline at end of file
diff --git a/src/components/MessagesView.vue b/src/components/MessagesView.vue
index 7df266a..b43e0df 100644
--- a/src/components/MessagesView.vue
+++ b/src/components/MessagesView.vue
@@ -6,7 +6,7 @@
           Messages
         </div>
         <v-icon icon="mdi-pause" class="ml-3" @click="toggleLock" :class="{'icon-disable': locked}"/>
-        <v-icon :icon="hidden ? 'mdi-eye' : 'mdi-eye-off'" class="ml-3" @click="toggleHidden"/>
+        <v-icon :icon="hidden ? 'mdi-eye-off' : 'mdi-eye'" class="ml-3" @click="toggleHidden"/>
         <v-icon :icon="sortIcon" class="ml-3" @click="cycleSortType"/>
       </div>
       <div>
@@ -144,6 +144,10 @@ export default {
   width: 100%;
 }
 
+.item__message:last-child {
+  border-bottom: none;
+}
+
 .item__score {
   background-color: var(--bg2);
   width: 80px;
diff --git a/src/components/PresentationModeCenterView.vue b/src/components/PresentationModeCenterView.vue
index 92155b4..be7af25 100644
--- a/src/components/PresentationModeCenterView.vue
+++ b/src/components/PresentationModeCenterView.vue
@@ -15,7 +15,8 @@ const worstChatter = computed(() => {
   if (users.value.length === 0) {
     return null;
   }
-  return users.value[users.value.length - 1];
+  return users.value[0]
+  // return users.value[users.value.length - 1];
 });
 
 onMounted(() => {
@@ -112,7 +113,7 @@ onMounted(() => {
     <div class="container__message-box-wrapper">
       <div class="container__message-box">
         <div>
-          Our worst chatter is:
+          Our best chatter is:
         </div>
         <div v-if="worstChatter">
 
diff --git a/src/components/PrimaryCenterView.vue b/src/components/PrimaryCenterView.vue
index a028c1f..fa90c42 100644
--- a/src/components/PrimaryCenterView.vue
+++ b/src/components/PrimaryCenterView.vue
@@ -27,6 +27,7 @@
         <div v-else class="container__tab-panel">
           <div class="card__title">Rule Tuning</div>
           <TuningCard title="Regex" ruleId="08bdfaedb6"/>
+
         </div>
       </div>
     </div>
diff --git a/src/components/RegexConfigCard.vue b/src/components/RegexRuleContent.vue
similarity index 89%
rename from src/components/RegexConfigCard.vue
rename to src/components/RegexRuleContent.vue
index 010d813..921b934 100644
--- a/src/components/RegexConfigCard.vue
+++ b/src/components/RegexRuleContent.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="card__regex">
-    <div class="header__row-name">
-      <h1>Regex</h1>
-      <v-icon icon="mdi-pencil"></v-icon>
-    </div>
-    <div class="item__description">
-      Match messages with a specific regex pattern.
-    </div>
     <div class="container__regex-input">
       <codemirror v-model="regex" class="input__regex" @input="validateRegex"
                   :extensions="extensions" :options="{lineNumbers: false, theme: 'one-dark'}">
diff --git a/src/components/RuleConfigCard.vue b/src/components/RuleConfigCard.vue
new file mode 100644
index 0000000..a664d54
--- /dev/null
+++ b/src/components/RuleConfigCard.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="card__rule-component">
+    <div class="header__row-name">
+      <h1>{{ title }}</h1>
+      <v-icon icon="mdi-pencil"></v-icon>
+    </div>
+    <div class="item__description">
+      {{ description }}
+    </div>
+    <div class="container__config-content">
+      <RegexRuleContent v-if="type === 'regex'"/>
+      <DefaultRuleContent v-else/>
+    </div>
+  </div>
+</template>
+<script setup>
+import {defineProps} from 'vue';
+import DefaultRuleContent from "./DefaultRuleContent.vue";
+import RegexRuleContent from "./RegexRuleContent.vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    default: 'No description provided.'
+  },
+  type: {
+    type: String,
+    default: 'default'
+  }
+})
+
+</script>
+<style scoped>
+
+.item__description {
+  font-size: 0.85em;
+  margin-top: 0.5rem;
+  font-weight: 500;
+}
+
+.card__rule-component {
+  font-size: 1em;
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+  background-color: var(--bg3);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 0.6rem;
+}
+
+.container__config-content {
+  margin-top: 0.5rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/RuleTile.vue b/src/components/RuleTile.vue
index 6fa94d9..a322962 100644
--- a/src/components/RuleTile.vue
+++ b/src/components/RuleTile.vue
@@ -16,11 +16,18 @@
     <div v-if="expanded" class="container__rule-details">
       <div class="row__rule-details-header">
         <h2>IF</h2>
-        <v-autocomplete v-model="condition" :items="conditionTypes" item-text="name" item-value="id"
-                        label="Condition Type" outlined></v-autocomplete>
+        <v-autocomplete v-model="condition" :items="conditionTypes" item-title="name" item-value="id"
+                        label="Condition Type" outlined>
+          <template v-slot:item="{props, item}">
+            <v-list-item class="item__rule-option" :title="item.title" :subtitle="item.raw.description" v-bind="props">
+            </v-list-item>
+          </template>
+        </v-autocomplete>
       </div>
       <div class="container__rule-action">
-        <RegexConfigCard/>
+        <RuleConfigCard title="Regex" description="Match messages with a specific regex pattern" type="regex">
+        </RuleConfigCard>
+
       </div>
       <div class="row__rule-details-header">
         <h2>THEN</h2>
@@ -30,15 +37,15 @@
         </v-autocomplete>
       </div>
       <div class="container__rule-condition">
-        <RegexConfigCard/>
       </div>
     </div>
   </div>
 </template>
 <script setup>
 import {computed, ref} from "vue";
-import RegexConfigCard from "./RegexConfigCard.vue";
-import { conditionTypes, actionTypes } from "../rules.js";
+import RegexConfigCard from "./RegexRuleContent.vue";
+import {conditionTypes, actionTypes} from "../rules.js";
+import RuleConfigCard from "./RuleConfigCard.vue";
 
 
 const props = defineProps({
@@ -49,7 +56,6 @@ const props = defineProps({
 })
 
 
-
 const expanded = ref(false);
 const rule = ref(props.rule);
 
@@ -138,4 +144,9 @@ input[type=number]::-webkit-outer-spin-button {
   margin-bottom: 0.5rem;
   font-weight: 800;
 }
+
+.item__rule-option-title {
+  font-size: 0.95em;
+  font-weight: 700;
+}
 </style>
\ No newline at end of file
diff --git a/src/rules.js b/src/rules.js
index d3ae21e..a3e69fe 100644
--- a/src/rules.js
+++ b/src/rules.js
@@ -62,7 +62,7 @@ export const conditionTypes = [
     {
         id: 'seededchance',
         name: 'Seeded Random Chance',
-        description: "Match messages with a certain probability based on the message's hash. This means a message will always have the same outcome.",
+        description: "Match messages with a certain probability consistently based on the message's hash."
     },
     {
         id: 'timebased',
diff --git a/src/store/store.js b/src/store/store.js
index 006d592..7d0e847 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,5 +1,6 @@
 import {createStore} from "vuex";
 
+const DEBUG_MESSAGES = false;
 const store = createStore({
     modules: {},
     state: {
@@ -38,7 +39,9 @@ const store = createStore({
                     commit('setConnection', {isConnected: false, connectionString: 'localhost:8765'});
                 });
                 socket.addEventListener('message', event => {
-                    console.log('Message from server ', event.data);
+                    if (DEBUG_MESSAGES) {
+                        console.log('Received message from server: ' + event.data);
+                    }
                     dispatch('pushMessage', event.data);
                 });
                 commit('setSocket', socket);
@@ -59,12 +62,16 @@ const store = createStore({
                 fetch('http://localhost:5000/get_users')
                     .then(response => response.json())
                     .then(data => {
-                        console.log('Users list: ', data)
+                        if (DEBUG_MESSAGES) {
+                            console.log('Users list: ', data)
+                        }
                         // sort users by user_score. data is an object of key-value pairs, convert to array
                         let users = Object.values(data);
                         users = users.sort((a, b) => b.user_score - a.user_score);
                         commit('setUsers', users);
-                        console.log('Sorted users: ', state.users)
+                        if (DEBUG_MESSAGES) {
+                            console.log('Sorted users: ', state.users)
+                        }
                     })
             }, 3000);
         },

From 3cf0bafd56795347b7bdf22fb1fad5285c7a90f0 Mon Sep 17 00:00:00 2001
From: Sean Chalmers <42610534+AQUASINE@users.noreply.github.com>
Date: Tue, 16 Apr 2024 22:41:12 -0400
Subject: [PATCH 2/4] feat: detoxify conditions

---
 src/components/RuleTile.vue | 20 +++++++++++++++-----
 src/service/podium.py       |  8 ++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/RuleTile.vue b/src/components/RuleTile.vue
index a322962..121cfa3 100644
--- a/src/components/RuleTile.vue
+++ b/src/components/RuleTile.vue
@@ -25,8 +25,13 @@
         </v-autocomplete>
       </div>
       <div class="container__rule-action">
-        <RuleConfigCard title="Regex" description="Match messages with a specific regex pattern" type="regex">
+        <RuleConfigCard v-if="actionInfo" title="Regex" description="Match messages with a specific regex pattern"
+                        :type="condition">
         </RuleConfigCard>
+        <div v-else>
+          <RuleConfigCard title="Error" :description="'Could not find rule of type ' + condition" type="'default'">
+          </RuleConfigCard>
+        </div>
 
       </div>
       <div class="row__rule-details-header">
@@ -59,13 +64,18 @@ const props = defineProps({
 const expanded = ref(false);
 const rule = ref(props.rule);
 
-const action = ref(rule.value.action ?? {
-  name: 'nothing',
-  type: 'none'
-});
+const action = ref(rule.value.action.name);
 
 const condition = ref(rule.value.condition);
 
+const actionInfo = computed(() => {
+  return actionTypes.find(a => a.id === action.value.id);
+})
+
+const conditionInfo = computed(() => {
+  return conditionTypes.find(c => c.id === condition.value.id);
+})
+
 const ruleText = computed(() => {
   if (condition.value) {
     return `IF ${condition.value} THEN ${action.value.name}`;
diff --git a/src/service/podium.py b/src/service/podium.py
index b139404..ab7cee0 100644
--- a/src/service/podium.py
+++ b/src/service/podium.py
@@ -8,6 +8,7 @@
     'brown'
 ])
 from nltk.sentiment.vader import SentimentIntensityAnalyzer
+from detoxify import Detoxify
 
 class PodiumConfiguration():
     def __init__(self, id, twitch_channels=[], youtube_channels={}, rules=[]):
@@ -132,6 +133,13 @@ def cond_contains_any(result, matches):
             return True
     return False
 
+detox = Detoxify('original')
+def cond_toxicity(result, threshold):
+    tox_result = detox.predict(result.message)
+    toxicity = tox_result['toxicity']
+    severe_toxicity = tox_result['severe_toxicity']
+    return toxicity >= threshold or severe_toxicity >= threshold
+
 def cond_regex(result, regex):
     return re.search(regex, result.message) is not None
 

From f2b809c1c1caf78188e9168ad1f981e3832a33ad Mon Sep 17 00:00:00 2001
From: Sean Chalmers <42610534+AQUASINE@users.noreply.github.com>
Date: Wed, 17 Apr 2024 00:24:56 -0400
Subject: [PATCH 3/4] feat: add rule content cards

---
 src/components/ContainsRuleContent.vue   | 26 +++++++++++++++++++++++
 src/components/DefaultRuleContent.vue    | 10 +++++++--
 src/components/ExactMatchRuleContent.vue | 27 ++++++++++++++++++++++++
 src/components/FuzzyMatchRuleContent.vue | 26 +++++++++++++++++++++++
 src/components/RuleConfigCard.vue        | 11 ++++++++--
 src/components/RuleTile.vue              |  4 ++--
 src/rules.js                             |  2 +-
 src/style.css                            |  7 +++++-
 8 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ContainsRuleContent.vue
 create mode 100644 src/components/ExactMatchRuleContent.vue
 create mode 100644 src/components/FuzzyMatchRuleContent.vue

diff --git a/src/components/ContainsRuleContent.vue b/src/components/ContainsRuleContent.vue
new file mode 100644
index 0000000..ca088fe
--- /dev/null
+++ b/src/components/ContainsRuleContent.vue
@@ -0,0 +1,26 @@
+<script setup>
+import {ref} from "vue";
+
+const contains = ref('');
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it contains the following input:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  font-size: 0.95em;
+  margin-top: 0.5rem;
+  color: var(--text);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DefaultRuleContent.vue b/src/components/DefaultRuleContent.vue
index 732f611..2155e8d 100644
--- a/src/components/DefaultRuleContent.vue
+++ b/src/components/DefaultRuleContent.vue
@@ -1,10 +1,16 @@
 <template>
   <div>
-    This is the default rule content. If you are seeing this, then the selected rule has not yet been implemented.
+    This is the default rule content. If you are seeing this, then the selected rule type <code>{{ type }}</code> has not yet been implemented.
   </div>
 </template>
 <script>
 export default {
-  name: 'DefaultRuleContent'
+  name: 'DefaultRuleContent',
+  props: {
+    type: {
+      type: String,
+      required: true
+    }
+  }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/ExactMatchRuleContent.vue b/src/components/ExactMatchRuleContent.vue
new file mode 100644
index 0000000..5afa3dc
--- /dev/null
+++ b/src/components/ExactMatchRuleContent.vue
@@ -0,0 +1,27 @@
+<script setup>
+import {ref} from "vue";
+
+const contains = ref('');
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it exactly matches the following input:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+  <v-checkbox v-model="caseSensitive" label="Case Sensitive" class="checkbox__case-sensitive"></v-checkbox>
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  font-size: 0.95em;
+  margin-top: 0.5rem;
+  color: var(--text);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/FuzzyMatchRuleContent.vue b/src/components/FuzzyMatchRuleContent.vue
new file mode 100644
index 0000000..a4c14cb
--- /dev/null
+++ b/src/components/FuzzyMatchRuleContent.vue
@@ -0,0 +1,26 @@
+<script setup>
+import {ref} from "vue";
+
+const contains = ref('');
+
+</script>
+
+<template>
+<div>
+  This will check each message to see if it matches the following input with some flexibility:
+  <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+</div>
+</template>
+
+<style scoped>
+.input__contains {
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--bg4);
+  background-color: var(--bg2);
+  font-size: 0.95em;
+  margin-top: 0.5rem;
+  color: var(--text);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/RuleConfigCard.vue b/src/components/RuleConfigCard.vue
index a664d54..a53379e 100644
--- a/src/components/RuleConfigCard.vue
+++ b/src/components/RuleConfigCard.vue
@@ -8,8 +8,12 @@
       {{ description }}
     </div>
     <div class="container__config-content">
-      <RegexRuleContent v-if="type === 'regex'"/>
-      <DefaultRuleContent v-else/>
+      <AlwaysRuleContent v-if="type === 'always'"/>
+      <RegexRuleContent v-else-if="type === 'regex'"/>
+      <ContainsRuleContent v-else-if="type === 'contains'"/>
+      <ExactMatchRuleContent v-else-if="type === 'exactMatch'"/>
+      <FuzzyMatchRuleContent v-else-if="type === 'fuzzyMatch'"/>
+      <DefaultRuleContent v-else :type="type"/>
     </div>
   </div>
 </template>
@@ -17,6 +21,9 @@
 import {defineProps} from 'vue';
 import DefaultRuleContent from "./DefaultRuleContent.vue";
 import RegexRuleContent from "./RegexRuleContent.vue";
+import AlwaysRuleContent from "./AlwaysRuleContent.vue";
+import ContainsRuleContent from "./ContainsRuleContent.vue";
+import ExactMatchRuleContent from "./ExactMatchRuleContent.vue";
 
 const props = defineProps({
   title: {
diff --git a/src/components/RuleTile.vue b/src/components/RuleTile.vue
index 121cfa3..ede19bf 100644
--- a/src/components/RuleTile.vue
+++ b/src/components/RuleTile.vue
@@ -25,7 +25,7 @@
         </v-autocomplete>
       </div>
       <div class="container__rule-action">
-        <RuleConfigCard v-if="actionInfo" title="Regex" description="Match messages with a specific regex pattern"
+        <RuleConfigCard v-if="conditionInfo" :title="conditionInfo.name" :description="conditionInfo.description"
                         :type="condition">
         </RuleConfigCard>
         <div v-else>
@@ -73,7 +73,7 @@ const actionInfo = computed(() => {
 })
 
 const conditionInfo = computed(() => {
-  return conditionTypes.find(c => c.id === condition.value.id);
+  return conditionTypes.find(c => c.id === condition.value);
 })
 
 const ruleText = computed(() => {
diff --git a/src/rules.js b/src/rules.js
index a3e69fe..e114806 100644
--- a/src/rules.js
+++ b/src/rules.js
@@ -1,6 +1,6 @@
 export const conditionTypes = [
     {
-        id: 'none',
+        id: 'always',
         name: 'Always',
         description: "Match all messages.",
     },
diff --git a/src/style.css b/src/style.css
index 2dfe876..3fdbfa8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -56,6 +56,12 @@ a {
 a:hover {
 }
 
+code {
+    font-family: 'Fira Code', 'Courier New', monospace;
+    font-size: 0.9em;
+    background-color: var(--bg1);
+}
+
 ::selection {
   background-color: var(--primary);
   color: var(--text);
@@ -139,7 +145,6 @@ button:focus-visible {
 }
 
 code {
-  background-color: #1a1a1a;
   padding: 2px 4px;
   margin: 0 4px;
   border-radius: 4px;

From 2e7656b60d21adb300d2a0dedfb40425980347c6 Mon Sep 17 00:00:00 2001
From: Sean Chalmers <42610534+AQUASINE@users.noreply.github.com>
Date: Wed, 17 Apr 2024 00:35:52 -0400
Subject: [PATCH 4/4] feat: reusable checkbox component, rule content

---
 src/components/CompactCheckbox.vue       | 38 ++++++++++++++
 src/components/ConfigurationTab.vue      | 63 +---------------------
 src/components/ContainsRuleContent.vue   |  7 ++-
 src/components/ExactMatchRuleContent.vue |  9 ++--
 src/components/OutputCard.vue            | 66 ++++++++++++++++++++++++
 5 files changed, 117 insertions(+), 66 deletions(-)
 create mode 100644 src/components/CompactCheckbox.vue
 create mode 100644 src/components/OutputCard.vue

diff --git a/src/components/CompactCheckbox.vue b/src/components/CompactCheckbox.vue
new file mode 100644
index 0000000..96cb456
--- /dev/null
+++ b/src/components/CompactCheckbox.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="checkbox__compact">
+    <v-checkbox :label="label" v-model="model"></v-checkbox>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+});
+
+const model = defineModel();
+
+</script>
+<style scoped>
+.checkbox__compact {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 0.85em;
+}
+
+.checkbox__compact >>> .v-checkbox {
+  font-size: 0.95rem;
+  margin-top: -0.5rem;
+  margin-bottom: -2rem;
+  margin-left: -0.5rem;
+}
+
+.checkbox__compact >>> .v-label {
+  font-size: 0.85rem;
+  color: var(--text) !important;
+  opacity: 1;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/ConfigurationTab.vue b/src/components/ConfigurationTab.vue
index cf01a25..b64301d 100644
--- a/src/components/ConfigurationTab.vue
+++ b/src/components/ConfigurationTab.vue
@@ -9,21 +9,7 @@
     <IconSectionHeader icon="mdi-ruler">Rules</IconSectionHeader>
     <RulesCard/>
     <IconSectionHeader icon="mdi-cog">Output</IconSectionHeader>
-    <div class="container__output-card">
-      <div class="item__output-port">
-        <v-icon icon="mdi-connection"></v-icon>
-        <div class="output__port-name">
-          Output Port
-        </div>
-        <input type="number" class="input__output-port" v-model="outputPort"/>
-      </div>
-      <div class="item__consume-mode">
-        <v-checkbox label="Consume Mode"></v-checkbox>
-      </div>
-      <div class="item__consume-mode">
-        <v-checkbox label="Log to file"></v-checkbox>
-      </div>
-    </div>
+    <OutputCard :outputPort="outputPort"/>
     <div class="button__save">
       Save
       </div>
@@ -34,13 +20,13 @@ import DataSourceCard from "./DataSourceCard.vue";
 import {ref} from "vue";
 import RulesCard from "./RulesCard.vue";
 import IconSectionHeader from "./IconSectionHeader.vue";
+import OutputCard from "./OutputCard.vue";
 
 const dataSources = ref([
   { name: 'AQUASINE', type: 'ttv', connected: true, startingScore: 100 },
   { name: 'AQUASINE', type: 'youtube', connected: false, startingScore: 100 },
 ]);
 
-const outputPort = ref(8765);
 
 </script>
 <style scoped>
@@ -66,52 +52,7 @@ input[type=number]::-webkit-outer-spin-button {
   color: var(--text-mute);
 }
 
-.container__output-card {
-  background-color: var(--bg3);
-  padding: 0.75rem;
-  border-radius: 0.25rem;
-}
 
-.item__output-port {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.85em;
-  margin-bottom: 0.5rem;
-}
-
-.item__output-port .input__output-port {
-  border-radius: 8px;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  width: 50px;
-  height: 30px;
-  background-color: var(--bg2);
-  text-align: center;
-  border: 1px solid transparent;
-  transition: border-color 0.25s;
-}
-
-.item__consume-mode {
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  font-size: 0.85em;
-}
-
-.item__consume-mode >>> .v-checkbox {
-  font-size: 0.95rem;
-  margin-top: -0.5rem;
-  margin-bottom: -2rem;
-  margin-left: -0.5rem;
-}
-
-.item__consume-mode >>> .v-label {
-  font-size: 0.85rem;
-  color: var(--text) !important;
-  opacity: 1;
-}
 
 .button__save {
   display: flex;
diff --git a/src/components/ContainsRuleContent.vue b/src/components/ContainsRuleContent.vue
index ca088fe..384bdef 100644
--- a/src/components/ContainsRuleContent.vue
+++ b/src/components/ContainsRuleContent.vue
@@ -1,7 +1,9 @@
 <script setup>
 import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
 
 const contains = ref('');
+const caseSensitive = ref(false);
 
 </script>
 
@@ -9,6 +11,7 @@ const contains = ref('');
 <div>
   This will check each message to see if it contains the following input:
   <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
+  <CompactCheckbox label="Case Sensitive" v-model="caseSensitive"/>
 </div>
 </template>
 
@@ -19,8 +22,8 @@ const contains = ref('');
   border-radius: 0.25rem;
   border: 1px solid var(--bg4);
   background-color: var(--bg2);
-  font-size: 0.95em;
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
   color: var(--text);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ExactMatchRuleContent.vue b/src/components/ExactMatchRuleContent.vue
index 5afa3dc..c146b74 100644
--- a/src/components/ExactMatchRuleContent.vue
+++ b/src/components/ExactMatchRuleContent.vue
@@ -1,7 +1,9 @@
 <script setup>
 import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
 
 const contains = ref('');
+const caseSensitive = ref(false);
 
 </script>
 
@@ -9,7 +11,7 @@ const contains = ref('');
 <div>
   This will check each message to see if it exactly matches the following input:
   <input type="text" v-model="contains" class="input__contains" placeholder="Contains..." />
-  <v-checkbox v-model="caseSensitive" label="Case Sensitive" class="checkbox__case-sensitive"></v-checkbox>
+  <CompactCheckbox label="Case Sensitive" v-model="caseSensitive"/>
 </div>
 </template>
 
@@ -20,8 +22,9 @@ const contains = ref('');
   border-radius: 0.25rem;
   border: 1px solid var(--bg4);
   background-color: var(--bg2);
-  font-size: 0.95em;
-  margin-top: 0.5rem;
+  font-size: 1em;
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
   color: var(--text);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/OutputCard.vue b/src/components/OutputCard.vue
new file mode 100644
index 0000000..886be57
--- /dev/null
+++ b/src/components/OutputCard.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="container__output-card">
+    <div class="item__output-port">
+      <v-icon icon="mdi-connection"></v-icon>
+      <div class="output__port-name">
+        Output Port
+      </div>
+      <input type="number" class="input__output-port" v-model="outputPort"/>
+    </div>
+    <CompactCheckbox v-model="consumeMode" label="Consume Mode"/>
+    <CompactCheckbox v-model="logToFile" label="Log to file"/>
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import CompactCheckbox from "./CompactCheckbox.vue";
+
+const outputPort = ref(8765);
+const consumeMode = ref(false);
+const logToFile = ref(false);
+
+</script>
+<style scoped>
+
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.container__output-card {
+  background-color: var(--bg3);
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+}
+
+.item__output-port {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85em;
+  margin-bottom: 0.5rem;
+}
+
+.item__output-port .input__output-port {
+  border-radius: 8px;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  width: 50px;
+  height: 30px;
+  background-color: var(--bg2);
+  text-align: center;
+  border: 1px solid transparent;
+  transition: border-color 0.25s;
+}
+
+.item__consume-mode {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  font-size: 0.85em;
+}
+
+</style>
\ No newline at end of file