From 50d64de72acb9ee97a7735aeb65470d51195f522 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martinmckeaveney@gmail.com>
Date: Tue, 3 Sep 2024 18:51:45 +0100
Subject: [PATCH] styling updates

---
 .../portal/settings/ai/AIConfigTile.svelte    | 33 +++++++++++++++++--
 .../builder/portal/settings/ai/constants.ts   |  2 +-
 .../portal/settings/ai/logos/Budibase.svelte  | 17 ++++++++++
 .../settings/ai/logos/TogetherAI.svelte       | 17 ++++++++++
 4 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/settings/ai/logos/Budibase.svelte
 create mode 100644 packages/builder/src/pages/builder/portal/settings/ai/logos/TogetherAI.svelte

diff --git a/packages/builder/src/pages/builder/portal/settings/ai/AIConfigTile.svelte b/packages/builder/src/pages/builder/portal/settings/ai/AIConfigTile.svelte
index 4b9b4cc506..d02c2c62c3 100644
--- a/packages/builder/src/pages/builder/portal/settings/ai/AIConfigTile.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/ai/AIConfigTile.svelte
@@ -2,6 +2,7 @@
   import { Body, Label, Icon } from "@budibase/bbui"
   import OpenAILogo from "./logos/OpenAI.svelte"
   import AnthropicLogo from "./logos/Anthropic.svelte"
+  import TogetherAILogo from "./logos/TogetherAI.svelte"
   import { Providers } from "./constants"
 
   export let config
@@ -19,6 +20,8 @@
       <OpenAILogo height="30" width="30"/>
     {:else if config.provider === Providers.Anthropic.name}
       <AnthropicLogo height="30" width="30"/>
+    {:else if config.provider === Providers.TogetherAI.name}
+      <TogetherAILogo height="30" width="30"/>
     {/if}
   </div>
   <div class="header">
@@ -28,17 +31,23 @@
   <div class="controls">
     <Icon
       on:click={editHandler}
+      color="var(--grey-6)"
       size="S"
       hoverable
       name="Edit"
     />
     <Icon
       on:click={deleteHandler}
+      color="var(--grey-6)"
       size="S"
       hoverable
       name="Delete"
     />
-    <div>Activated</div>
+    {#if config.active}
+      <div class="tag active">Activated</div>
+    {:else if !config.active}
+      <div class="tag disabled">Disabled</div>
+    {/if}
   </div>
 </div>
 
@@ -46,7 +55,7 @@
   .option {
     background-color: var(--background);
     border: 1px solid var(--grey-4);
-    padding: 10px 16px 14px;
+    padding: 16px;
     border-radius: 4px;
     cursor: pointer;
     display: grid;
@@ -87,4 +96,24 @@
     grid-gap: 10px;
     align-items: center;
   }
+
+  .tag {
+    display: flex;
+    color: var(--spectrum-body-m-text-color);
+    padding: 4px 8px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+  }
+
+  .active {
+    border-radius: 5px;
+    background: var(--spectrum-global-color-green-600);
+  }
+
+  .disabled {
+    border-radius: 5px;
+    background: var(--spectrum-global-color-red-600);
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/settings/ai/constants.ts b/packages/builder/src/pages/builder/portal/settings/ai/constants.ts
index 07e0ea1cb7..9c82f714a4 100644
--- a/packages/builder/src/pages/builder/portal/settings/ai/constants.ts
+++ b/packages/builder/src/pages/builder/portal/settings/ai/constants.ts
@@ -22,7 +22,7 @@ export const Providers = {
   TogetherAI: {
     name: "Together AI",
     // TODO: too many - probably need to use an autocomplete for this
-    models: [""]
+    models: ["whatever"]
   },
   Custom: {
     name: "Custom",
diff --git a/packages/builder/src/pages/builder/portal/settings/ai/logos/Budibase.svelte b/packages/builder/src/pages/builder/portal/settings/ai/logos/Budibase.svelte
new file mode 100644
index 0000000000..f69c7d8281
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/settings/ai/logos/Budibase.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let width
+  export let height
+</script>
+<svg {width} {height} viewBox="0 0 265 265" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1_1799)">
+    <path d="M158.2 8.6V116.6C158.2 121.3 162 125.2 166.8 125.2H213.8C218 125.2 222 123.2 224.6 119.8L262.9 68.9C265.7 65.2 265.7 60.1 262.9 56.4L224.6 5.4C222 2 218 0 213.8 0H166.8C162 0 158.2 3.8 158.2 8.6Z" fill="#FF4E4E"/>
+    <path d="M158.2 148.4V256.4C158.2 261.1 162 265 166.8 265H213.8C218 265 222 263 224.6 259.6L262.9 208.7C265.7 205 265.7 199.9 262.9 196.2L224.6 145.3C222.1 141.9 218.1 139.9 213.8 139.9H166.8C162 139.8 158.2 143.7 158.2 148.4Z" fill="#6E56FF"/>
+    <path d="M0 8.6V116.6C0 121.3 3.8 125.2 8.6 125.2H109.6C113.8 125.2 117.8 123.2 120.4 119.8L155.9 72.5C160.3 66.6 160.3 58.5 155.9 52.6L120.3 5.4C117.8 2 113.8 0 109.5 0H8.6C3.8 0 0 3.8 0 8.6Z" fill="#F97777"/>
+    <path d="M0 148.4V256.4C0 261.1 3.8 265 8.6 265H109.6C113.8 265 117.8 263 120.4 259.6L155.9 212.3C160.3 206.4 160.3 198.3 155.9 192.4L120.4 145.1C117.9 141.7 113.9 139.7 109.6 139.7H8.6C3.8 139.8 0 143.7 0 148.4Z" fill="#9F8FFF"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1_1799">
+      <rect width="265" height="265" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/packages/builder/src/pages/builder/portal/settings/ai/logos/TogetherAI.svelte b/packages/builder/src/pages/builder/portal/settings/ai/logos/TogetherAI.svelte
new file mode 100644
index 0000000000..1afd5626b1
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/settings/ai/logos/TogetherAI.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let height
+  export let width
+</script>
+<svg {width} {height} viewBox="0 0 107 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.0727 6.13665H0.99707V4.44456H3.0727V1.2183H4.92272V4.44456H7.83312V6.13665H4.92272V12.9276C4.92272 13.4089 5.01297 13.7548 5.19346 13.9654C5.38899 14.1609 5.71988 14.2587 6.18615 14.2587H8.1941V15.9508H6.07334C4.9904 15.9508 4.2158 15.7101 3.74954 15.2288C3.29831 14.7475 3.0727 13.9879 3.0727 12.9501V6.13665Z" fill="currentColor"></path>
+  <path d="M14.1547 16.0861C13.0417 16.0861 12.049 15.838 11.1766 15.3416C10.3193 14.8453 9.64995 14.1534 9.16864 13.266C8.68734 12.3786 8.44669 11.3558 8.44669 10.1977C8.44669 9.03952 8.68734 8.01675 9.16864 7.12934C9.64995 6.24193 10.3193 5.55006 11.1766 5.05371C12.049 4.55736 13.0417 4.30919 14.1547 4.30919C15.2677 4.30919 16.2529 4.55736 17.1102 5.05371C17.9826 5.55006 18.6594 6.24193 19.1407 7.12934C19.622 8.01675 19.8627 9.03952 19.8627 10.1977C19.8627 11.3558 19.622 12.3786 19.1407 13.266C18.6594 14.1534 17.9826 14.8453 17.1102 15.3416C16.2529 15.838 15.2677 16.0861 14.1547 16.0861ZM14.1547 14.4392C14.9067 14.4392 15.5685 14.2587 16.1401 13.8977C16.7266 13.5367 17.1779 13.0329 17.4937 12.3861C17.8096 11.7393 17.9675 11.0099 17.9675 10.1977C17.9675 9.38546 17.8096 8.65598 17.4937 8.00923C17.1779 7.36247 16.7266 6.85861 16.1401 6.49763C15.5685 6.13665 14.9067 5.95616 14.1547 5.95616C13.4026 5.95616 12.7333 6.13665 12.1467 6.49763C11.5752 6.85861 11.1315 7.36247 10.8156 8.00923C10.4998 8.65598 10.3418 9.38546 10.3418 10.1977C10.3418 11.0099 10.4998 11.7393 10.8156 12.3861C11.1315 13.0329 11.5752 13.5367 12.1467 13.8977C12.7333 14.2587 13.4026 14.4392 14.1547 14.4392Z" fill="currentColor"></path>
+  <path d="M32.5327 4.44456V15.3867C32.5327 18.8612 30.6301 20.5984 26.8247 20.5984C25.3357 20.5984 24.1174 20.26 23.1698 19.5831C22.2373 18.9063 21.6958 17.9437 21.5454 16.6953H23.4406C23.591 17.4172 23.9745 17.9738 24.5912 18.3648C25.2079 18.7559 25.9975 18.9514 26.9601 18.9514C29.4418 18.9514 30.6827 17.7406 30.6827 15.3191V13.9654C29.8555 15.3792 28.5394 16.0861 26.7345 16.0861C25.6666 16.0861 24.7115 15.853 23.8692 15.3867C23.042 14.9205 22.3877 14.2436 21.9064 13.3562C21.4401 12.4688 21.207 11.416 21.207 10.1977C21.207 9.03952 21.4401 8.01675 21.9064 7.12934C22.3877 6.24193 23.0495 5.55006 23.8918 5.05371C24.7341 4.55736 25.6816 4.30919 26.7345 4.30919C27.667 4.30919 28.4642 4.4972 29.126 4.87322C29.7878 5.2342 30.3067 5.75311 30.6827 6.42994L30.9309 4.44456H32.5327ZM26.915 14.4392C27.652 14.4392 28.3063 14.2662 28.8778 13.9203C29.4644 13.5593 29.9156 13.0629 30.2315 12.4312C30.5473 11.7845 30.7053 11.055 30.7053 10.2428C30.7053 9.41554 30.5473 8.67854 30.2315 8.03179C29.9156 7.36999 29.4644 6.85861 28.8778 6.49763C28.3063 6.13665 27.652 5.95616 26.915 5.95616C25.7719 5.95616 24.8469 6.35474 24.14 7.1519C23.4481 7.93402 23.1021 8.94928 23.1021 10.1977C23.1021 11.4461 23.4481 12.4688 24.14 13.266C24.8469 14.0481 25.7719 14.4392 26.915 14.4392Z" fill="currentColor"></path>
+  <path d="M34.2758 10.1977C34.2758 9.02448 34.5014 7.99419 34.9526 7.10678C35.4189 6.21937 36.0656 5.53502 36.8929 5.05371C37.7201 4.55736 38.6677 4.30919 39.7356 4.30919C40.7884 4.30919 41.721 4.52728 42.5332 4.96346C43.3454 5.39965 43.9846 6.03136 44.4509 6.85861C44.9171 7.68585 45.1653 8.65598 45.1954 9.769C45.1954 9.93445 45.1803 10.1977 45.1503 10.5586H36.216V10.7166C36.2461 11.8446 36.592 12.7471 37.2538 13.4239C37.9156 14.1008 38.7805 14.4392 39.8484 14.4392C40.6756 14.4392 41.375 14.2361 41.9466 13.83C42.5332 13.4089 42.9242 12.8298 43.1198 12.0928H44.9923C44.7667 13.266 44.2027 14.2286 43.3002 14.9806C42.3978 15.7176 41.2923 16.0861 39.9837 16.0861C38.8406 16.0861 37.8404 15.8455 36.9831 15.3642C36.1258 14.8678 35.4565 14.176 34.9752 13.2885C34.5089 12.3861 34.2758 11.3558 34.2758 10.1977ZM43.2777 9.02448C43.1874 8.04683 42.8189 7.28727 42.1722 6.7458C41.5405 6.20433 40.7358 5.9336 39.7581 5.9336C38.8858 5.9336 38.1187 6.21937 37.4569 6.79092C36.7951 7.36247 36.4191 8.10699 36.3288 9.02448H43.2777Z" fill="currentColor"></path>
+  <path d="M47.5703 6.13665H45.4947V4.44456H47.5703V1.2183H49.4203V4.44456H52.3307V6.13665H49.4203V12.9276C49.4203 13.4089 49.5106 13.7548 49.6911 13.9654C49.8866 14.1609 50.2175 14.2587 50.6838 14.2587H52.6917V15.9508H50.571C49.488 15.9508 48.7134 15.7101 48.2472 15.2288C47.7959 14.7475 47.5703 13.9879 47.5703 12.9501V6.13665Z" fill="currentColor"></path>
+  <path d="M59.2771 4.30919C60.6759 4.30919 61.804 4.73033 62.6613 5.57262C63.5186 6.4149 63.9473 7.73849 63.9473 9.54339V15.9508H62.0973V9.6562C62.0973 8.46797 61.8265 7.56552 61.2851 6.94885C60.7436 6.31714 59.969 6.00128 58.9613 6.00128C57.8934 6.00128 57.0436 6.3773 56.4119 7.12934C55.7952 7.88138 55.4868 8.90415 55.4868 10.1977V15.9508H53.6368V0.157928H55.4868V6.3397C55.8629 5.73807 56.3592 5.24924 56.9759 4.87322C57.6076 4.4972 58.3747 4.30919 59.2771 4.30919Z" fill="currentColor"></path>
+  <path d="M65.5284 10.1977C65.5284 9.02448 65.754 7.99419 66.2052 7.10678C66.6715 6.21937 67.3182 5.53502 68.1455 5.05371C68.9727 4.55736 69.9203 4.30919 70.9882 4.30919C72.041 4.30919 72.9736 4.52728 73.7858 4.96346C74.598 5.39965 75.2372 6.03136 75.7035 6.85861C76.1697 7.68585 76.4179 8.65598 76.448 9.769C76.448 9.93445 76.4329 10.1977 76.4029 10.5586H67.4686V10.7166C67.4987 11.8446 67.8446 12.7471 68.5064 13.4239C69.1682 14.1008 70.0331 14.4392 71.101 14.4392C71.9282 14.4392 72.6276 14.2361 73.1992 13.83C73.7858 13.4089 74.1768 12.8298 74.3723 12.0928H76.2449C76.0193 13.266 75.4553 14.2286 74.5528 14.9806C73.6504 15.7176 72.5449 16.0861 71.2363 16.0861C70.0932 16.0861 69.093 15.8455 68.2357 15.3642C67.3784 14.8678 66.7091 14.176 66.2278 13.2885C65.7615 12.3861 65.5284 11.3558 65.5284 10.1977ZM74.5303 9.02448C74.44 8.04683 74.0715 7.28727 73.4248 6.7458C72.7931 6.20433 71.9884 5.9336 71.0107 5.9336C70.1384 5.9336 69.3713 6.21937 68.7095 6.79092C68.0477 7.36247 67.6717 8.10699 67.5814 9.02448H74.5303Z" fill="currentColor"></path>
+  <path d="M84.0314 4.44456V6.24945H83.1064C82.0084 6.24945 81.2188 6.61795 80.7374 7.35495C80.2712 8.09195 80.038 9.00192 80.038 10.0849V15.9508H78.188V4.44456H79.7899L80.038 6.18177C80.3689 5.65534 80.7976 5.2342 81.324 4.91834C81.8505 4.60249 82.5799 4.44456 83.5125 4.44456H84.0314Z" fill="currentColor"></path>
+  <path d="M102.875 14.2587V15.9508H101.859C101.122 15.9508 100.596 15.8004 100.28 15.4995C99.9643 15.1987 99.7988 14.755 99.7838 14.1684C98.8964 15.4469 97.6104 16.0861 95.9258 16.0861C94.6473 16.0861 93.6171 15.7853 92.8349 15.1837C92.0678 14.5821 91.6843 13.7623 91.6843 12.7245C91.6843 11.5664 92.0754 10.679 92.8575 10.0623C93.6546 9.44562 94.8053 9.13729 96.3093 9.13729H99.6935V8.34764C99.6935 7.5956 99.4378 7.00901 98.9265 6.58787C98.4301 6.16673 97.7307 5.95616 96.8283 5.95616C96.0311 5.95616 95.3693 6.13665 94.8429 6.49763C94.3315 6.84356 94.0156 7.30983 93.8953 7.89642H92.0453C92.1806 6.76836 92.677 5.88847 93.5343 5.25676C94.4067 4.62505 95.5348 4.30919 96.9185 4.30919C98.3925 4.30919 99.5281 4.67017 100.325 5.39213C101.137 6.09905 101.544 7.12182 101.544 8.46045V13.4239C101.544 13.9804 101.799 14.2587 102.311 14.2587H102.875ZM99.6935 10.694H96.1289C94.4142 10.694 93.5569 11.3332 93.5569 12.6117C93.5569 13.1833 93.7825 13.642 94.2337 13.9879C94.685 14.3339 95.2941 14.5069 96.0612 14.5069C97.1892 14.5069 98.0766 14.2136 98.7234 13.627C99.3702 13.0253 99.6935 12.2357 99.6935 11.258V10.694Z" fill="currentColor"></path>
+  <path d="M104.851 0C105.197 0 105.483 0.112806 105.708 0.338418C105.934 0.56403 106.047 0.849805 106.047 1.19574C106.047 1.54168 105.934 1.82746 105.708 2.05307C105.483 2.27868 105.197 2.39149 104.851 2.39149C104.505 2.39149 104.219 2.27868 103.994 2.05307C103.768 1.82746 103.655 1.54168 103.655 1.19574C103.655 0.849805 103.768 0.56403 103.994 0.338418C104.219 0.112806 104.505 0 104.851 0ZM103.926 4.44456H105.776V15.9508H103.926V4.44456Z" fill="currentColor"></path>
+  <path d="M88.067 14.1988C88.067 15.1664 87.2731 15.9508 86.2937 15.9508C85.3144 15.9508 84.5205 15.1664 84.5205 14.1988C84.5205 13.2312 85.3144 12.4468 86.2937 12.4468C87.2731 12.4468 88.067 13.2312 88.067 14.1988Z" fill="#0F6FFF"></path>
+</svg>
\ No newline at end of file