From 448353174c731a35301c72a60b3d6f121b76f364 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:00:45 +0000
Subject: [PATCH] refactor(fe2): Gendo pre-launch tidyup (#3794)

* Styling updates

* Gendo Icon update

* Testing updates

* updates from testing

* Small design changes

* Fix build

* Fix dialog buttons

* Testing updates

* Lightbox effect

* Fix tippy

* Lightbox changes

* Updates

* Updates from testing

* Fix import

* Updates from testing

* Add mixpanel

* Reuse prompt

* Move reuse button

* Add v-tippy to truncated text

* Container Query

* Reorder buttons

* Copy prompt. Image loading

* Changes from testing

* Alert consolodation

* Final updates

* Feedback

* Typo

* Updates form call with Benjamin

* Controls to top

* Changes from testing

* Generic Feedback

* Small changes from testing

* Changes from Fabs

* Small change

* No max width on prompt

* Add Dialog Transparent story

* Open feedback dialog on click of button
---
 .../frontend-2/assets/images/gendo/logo.svg   |   4 -
 .../frontend-2/components/feedback/Dialog.vue |  31 ++-
 .../components/global/icon/Gendo.vue          |  16 ++
 .../frontend-2/components/viewer/Controls.vue |  10 +-
 .../components/viewer/gendo/Dialog.vue        |  45 +++++
 .../components/viewer/gendo/Item.vue          | 148 +++++++++++---
 .../components/viewer/gendo/List.vue          |  10 +-
 .../components/viewer/gendo/Panel.vue         | 187 +++++++++++-------
 .../src/components/layout/Dialog.stories.ts   |  25 +++
 .../src/components/layout/Dialog.vue          |   7 +-
 10 files changed, 375 insertions(+), 108 deletions(-)
 delete mode 100644 packages/frontend-2/assets/images/gendo/logo.svg
 create mode 100644 packages/frontend-2/components/global/icon/Gendo.vue
 create mode 100644 packages/frontend-2/components/viewer/gendo/Dialog.vue

diff --git a/packages/frontend-2/assets/images/gendo/logo.svg b/packages/frontend-2/assets/images/gendo/logo.svg
deleted file mode 100644
index e0a6fe01cd..0000000000
--- a/packages/frontend-2/assets/images/gendo/logo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5695 7.84167C30.4459 7.87905 30.4465 8.05327 30.5704 8.08974L30.6008 8.09869C32.0949 8.53857 33.2612 9.70436 33.6956 11.1923C33.7314 11.3148 33.9059 11.3148 33.9425 11.1925C34.386 9.71452 35.5462 8.55207 37.0303 8.10336L37.0652 8.09282C37.1885 8.05553 37.1877 7.88161 37.064 7.84544L37.0283 7.835C35.5338 7.39799 34.3679 6.23128 33.938 4.74249C33.9028 4.62035 33.7287 4.62043 33.6922 4.7422C33.249 6.21893 32.0893 7.38202 30.6065 7.83048L30.5695 7.84167ZM31.4317 23.8166L31.4317 14.0863H31.4318V10.3168H31.4317V10.3162L26.998 10.3162V10.3168H17.2469L11.255 16.849V26.5794H11.2549V30.349H11.255V30.3494H15.6888V30.349L25.4397 30.349L31.4317 23.8166ZM26.998 26.5794L26.998 14.0863H15.6888L15.6888 26.5794H26.998Z" fill="white"/>
-</svg>
diff --git a/packages/frontend-2/components/feedback/Dialog.vue b/packages/frontend-2/components/feedback/Dialog.vue
index ae7dcfe814..e64a202196 100644
--- a/packages/frontend-2/components/feedback/Dialog.vue
+++ b/packages/frontend-2/components/feedback/Dialog.vue
@@ -1,15 +1,14 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    title="Give us feedback"
+    :title="dialogTitle"
     :buttons="dialogButtons"
     :on-submit="onSubmit"
     max-width="md"
   >
     <div class="flex flex-col gap-2">
       <p class="text-body-xs text-foreground font-medium">
-        How can we improve Speckle? If you have a feature request, please also share how
-        you would use it and why it's important to you
+        {{ dialogIntro }}
       </p>
       <FormTextArea
         v-model="feedback"
@@ -18,7 +17,7 @@
         label="Feedback"
         color="foundation"
       />
-      <p class="text-body-xs !leading-4">
+      <p v-if="!hideSuppport" class="text-body-xs !leading-4">
         Need help? For support, head over to our
         <FormButton to="https://speckle.community/" target="_blank" link text>
           community forum
@@ -39,8 +38,21 @@ import { isRequired } from '~/lib/common/helpers/validation'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 import { defaultZapierWebhookUrl } from '~/lib/common/helpers/route'
 
+type FeedbackType = 'general' | 'gendo'
 type FormValues = { feedback: string }
 
+const props = withDefaults(
+  defineProps<{
+    type?: FeedbackType
+    title?: string
+    intro?: string
+    hideSuppport?: boolean
+  }>(),
+  {
+    type: 'general'
+  }
+)
+
 const isOpen = defineModel<boolean>('open', { required: true })
 
 const { activeUser: user } = useActiveUser()
@@ -60,6 +72,14 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   }
 ])
 
+const dialogTitle = computed(() => props.title || 'Give us feedback')
+
+const dialogIntro = computed(
+  () =>
+    props.intro ||
+    'How can we improve Speckle? If you have a feature request, please also share how you would use it and why its important to you'
+)
+
 const onSubmit = handleSubmit(async () => {
   if (!feedback.value) return
 
@@ -71,7 +91,8 @@ const onSubmit = handleSubmit(async () => {
   })
 
   mixpanel.track('Feedback Sent', {
-    message: feedback.value
+    message: feedback.value,
+    feedbackType: props.type
   })
 
   await sendWebhook(defaultZapierWebhookUrl, {
diff --git a/packages/frontend-2/components/global/icon/Gendo.vue b/packages/frontend-2/components/global/icon/Gendo.vue
new file mode 100644
index 0000000000..d9ce43b206
--- /dev/null
+++ b/packages/frontend-2/components/global/icon/Gendo.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="38"
+    height="37"
+    viewBox="0 0 38 37"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M30.5695 7.84167C30.4459 7.87905 30.4465 8.05327 30.5704 8.08974L30.6008 8.09869C32.0949 8.53857 33.2612 9.70436 33.6956 11.1923C33.7314 11.3148 33.9059 11.3148 33.9425 11.1925C34.386 9.71452 35.5462 8.55207 37.0303 8.10336L37.0652 8.09282C37.1885 8.05553 37.1877 7.88161 37.064 7.84544L37.0283 7.835C35.5338 7.39799 34.3679 6.23128 33.938 4.74249C33.9028 4.62035 33.7287 4.62043 33.6922 4.7422C33.249 6.21893 32.0893 7.38202 30.6065 7.83048L30.5695 7.84167ZM31.4317 23.8166L31.4317 14.0863H31.4318V10.3168H31.4317V10.3162L26.998 10.3162V10.3168H17.2469L11.255 16.849V26.5794H11.2549V30.349H11.255V30.3494H15.6888V30.349L25.4397 30.349L31.4317 23.8166ZM26.998 26.5794L26.998 14.0863H15.6888L15.6888 26.5794H26.998Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/packages/frontend-2/components/viewer/Controls.vue b/packages/frontend-2/components/viewer/Controls.vue
index 46992ab65e..7ce2b32c0b 100644
--- a/packages/frontend-2/components/viewer/Controls.vue
+++ b/packages/frontend-2/components/viewer/Controls.vue
@@ -148,15 +148,13 @@
           <!-- Gendo -->
           <ViewerControlsButtonToggle
             v-show="isGendoEnabled"
-            v-tippy="'Real time AI rendering powered by Gendo'"
+            v-tippy="'AI Render by Gendo'"
             :active="activePanel === 'gendo'"
-            class="hover:hue-rotate-30 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-amber-200 via-violet-600 to-sky-900"
             @click="toggleActivePanel('gendo')"
           >
-            <img
-              src="~/assets/images/gendo/logo.svg"
-              alt="gendo Logo"
-              class="h-6 w-6 md:h-8 md:w-8 -ml-1 -mt-1"
+            <IconGendo
+              class="h-6 w-6 md:h-7 md:w-7 -ml-1 -mt-1"
+              :class="activePanel === 'gendo' ? 'text-white' : 'text-foreground-2'"
             />
           </ViewerControlsButtonToggle>
         </div>
diff --git a/packages/frontend-2/components/viewer/gendo/Dialog.vue b/packages/frontend-2/components/viewer/gendo/Dialog.vue
new file mode 100644
index 0000000000..7175b47f8a
--- /dev/null
+++ b/packages/frontend-2/components/viewer/gendo/Dialog.vue
@@ -0,0 +1,45 @@
+<template>
+  <LayoutDialog v-model:open="isOpen" max-width="xl" is-transparent>
+    <div class="relative flex flex-col items-center justify-center gap-2 w-full h-full">
+      <!-- Fullscreen button behind image to handle background clicks -->
+      <!-- that are still inside dialog and show loading state -->
+      <button
+        class="absolute inset-0 flex items-center justify-center"
+        @click="isOpen = false"
+      >
+        <CommonLoadingIcon />
+      </button>
+      <NuxtImg
+        :src="renderUrl"
+        :alt="renderPrompt"
+        class="relative z-10 w-full h-full max-h-[70vh] max-w-[80vw] object-contain"
+      />
+      <div class="relative z-10 flex gap-2">
+        <FormButton
+          :to="renderUrl"
+          external
+          target="_blank"
+          download
+          color="outline"
+          :icon-left="ArrowDownTrayIcon"
+        >
+          Download
+        </FormButton>
+        <FormButton color="outline" :icon-left="XMarkIcon" @click="isOpen = false">
+          Close
+        </FormButton>
+      </div>
+    </div>
+  </LayoutDialog>
+</template>
+
+<script setup lang="ts">
+import { XMarkIcon, ArrowDownTrayIcon } from '@heroicons/vue/24/solid'
+
+defineProps<{
+  renderUrl?: string
+  renderPrompt?: string
+}>()
+
+const isOpen = defineModel<boolean>('open', { required: true })
+</script>
diff --git a/packages/frontend-2/components/viewer/gendo/Item.vue b/packages/frontend-2/components/viewer/gendo/Item.vue
index 942b451398..95da614e9e 100644
--- a/packages/frontend-2/components/viewer/gendo/Item.vue
+++ b/packages/frontend-2/components/viewer/gendo/Item.vue
@@ -2,14 +2,55 @@
   <div v-if="detailedRender">
     <div class="relative">
       <div v-if="detailedRender.status === 'COMPLETED' && renderUrl" class="group">
-        <img :src="renderUrl" alt="render" class="rounded-lg shadow" />
-        <div
-          class="absolute top-2 left-2 bg-foundation p-1 rounded opacity-0 group-hover:opacity-100 transition"
-        >
-          <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
-          <a :href="renderUrl" target="_blank" title="download image">
-            <ArrowDownTrayIcon class="w-4" />
-          </a>
+        <button class="relative flex cursor-zoom-in" @click="openPreview">
+          <div
+            class="absolute inset-0 bg-highlight-3 flex items-center justify-center rounded-lg"
+          >
+            <CommonLoadingIcon />
+          </div>
+          <NuxtImg
+            :src="renderUrl"
+            :alt="detailedRender.prompt"
+            class="relative z-10 rounded-lg shadow aspect-video w-full object-cover"
+          />
+        </button>
+        <div class="hidden group-hover:flex absolute top-2 left-2 gap-1 z-10">
+          <div v-tippy="`Set view`">
+            <FormButton
+              :icon-left="VideoCameraIcon"
+              hide-text
+              color="outline"
+              size="sm"
+              @click="setView()"
+            >
+              Set View
+            </FormButton>
+          </div>
+          <div v-tippy="`Copy prompt`">
+            <FormButton
+              :icon-left="ClipboardIcon"
+              hide-text
+              color="outline"
+              size="sm"
+              @click="copyPrompt"
+            >
+              Copy prompt
+            </FormButton>
+          </div>
+          <div v-tippy="`Download`">
+            <FormButton
+              :to="renderUrl"
+              external
+              target="_blank"
+              download
+              :icon-left="ArrowDownTrayIcon"
+              hide-text
+              color="outline"
+              size="sm"
+            >
+              Download
+            </FormButton>
+          </div>
         </div>
       </div>
       <div
@@ -25,24 +66,35 @@
         <ExclamationCircleIcon v-else class="w-6 text-danger" />
       </div>
       <div
-        class="absolute bottom-2 left-2 text-sm rounded-md pr-4 space-x-2 flex items-center min-w-0 max-w-full overflow-hidden"
+        class="absolute bottom-2 left-2 right-2 space-x-2 flex items-center min-w-0 max-w-full overflow-hidden z-10"
       >
         <div
-          class="bg-foundation p-2 flex items-center space-x-2 min-w-0 max-w-full rounded-md"
+          class="bg-foundation p-0.5 flex items-center gap-x-1 min-w-0 max-w-full rounded-md"
         >
           <UserAvatar :user="detailedRender.user" size="sm" />
-          <button
-            v-if="detailedRender.camera"
-            v-tippy="'Set view'"
-            class="mt-[2px] hover:text-blue-500 transition"
-            @click="setView()"
-          >
-            <VideoCameraIcon class="w-4" />
-          </button>
-          <span class="truncate max-w-full">{{ detailedRender.prompt }}</span>
+          <div v-tippy="capitalizedPrompt" class="truncate select-none text-body-2xs">
+            {{ capitalizedPrompt }}
+          </div>
+          <div v-tippy="`Reuse prompt`" class="shrink-0 h-6">
+            <FormButton
+              :icon-left="ArrowUturnUpIcon"
+              hide-text
+              color="subtle"
+              size="sm"
+              @click="reusePrompt"
+            >
+              Reuse prompt
+            </FormButton>
+          </div>
         </div>
       </div>
     </div>
+    <FeedbackDialog v-model:open="isFeedbackOpen" :intro="feedbackIntro" type="gendo" />
+    <ViewerGendoDialog
+      v-model:open="isPreviewOpen"
+      :render-url="renderUrl"
+      :render-prompt="detailedRender.prompt"
+    />
   </div>
   <div v-else />
 </template>
@@ -57,15 +109,24 @@ import { useInjectedViewerState } from '~/lib/viewer/composables/setup'
 import {
   VideoCameraIcon,
   ExclamationCircleIcon,
-  ArrowDownTrayIcon
+  ArrowDownTrayIcon,
+  ArrowUturnUpIcon,
+  ClipboardIcon
 } from '@heroicons/vue/24/outline'
 import { useCameraUtilities } from '~/lib/viewer/composables/ui'
 import { Vector3 } from 'three'
+import { CommonLoadingIcon } from '@speckle/ui-components'
+import { useMixpanel } from '~/lib/core/composables/mp'
+import { upperFirst } from 'lodash-es'
 
 const props = defineProps<{
   renderRequest: GendoAiRender
 }>()
 
+const emit = defineEmits<{
+  (e: 'reuse-prompt', prompt: string): void
+}>()
+
 const {
   projectId,
   resources: {
@@ -73,6 +134,16 @@ const {
   }
 } = useInjectedViewerState()
 
+const { copy } = useClipboard()
+const { triggerNotification } = useGlobalToast()
+
+const isPreviewOpen = ref(false)
+const isFeedbackOpen = ref(false)
+
+const feedbackIntro = ref(
+  'How can we improve the AI rendering experience? Let us know about the quality of renders, prompts that you have had success with, or any features that would make Gendo more useful for your workflow'
+)
+
 const versionId = computed(() => {
   return resourceItems.value[0].versionId as string
 })
@@ -92,13 +163,14 @@ onRenderUpdated(() => {
   refetch()
 })
 
-const detailedRender = computed(() => result.value?.project?.version?.gendoAIRender)
-
 const { setView: setViewInternal } = useCameraUtilities()
-
+const mixpanel = useMixpanel()
 const apiOrigin = useApiOrigin()
+
+const detailedRender = computed(() => result.value?.project?.version?.gendoAIRender)
+
 const renderUrl = computed(() => {
-  if (detailedRender.value?.status !== 'COMPLETED') return null
+  if (detailedRender.value?.status !== 'COMPLETED') return undefined
   const url = new URL(
     `/api/stream/${projectId.value}/blob/${detailedRender.value?.responseImage}`,
     apiOrigin
@@ -106,6 +178,18 @@ const renderUrl = computed(() => {
   return url.toString()
 })
 
+const capitalizedPrompt = computed(() => {
+  return upperFirst(detailedRender.value?.prompt)
+})
+
+const reusePrompt = () => {
+  mixpanel.track('Gendo Prompt Reused', {
+    renderId: detailedRender.value?.id,
+    prompt: detailedRender.value?.prompt
+  })
+  emit('reuse-prompt', capitalizedPrompt.value || '')
+}
+
 const setView = () => {
   const cam = detailedRender.value?.camera as { target: Vector3; position: Vector3 }
 
@@ -117,4 +201,20 @@ const setView = () => {
     true
   )
 }
+
+const openPreview = () => {
+  mixpanel.track('Gendo Render Preview Opened', {
+    renderId: detailedRender.value?.id,
+    prompt: detailedRender.value?.prompt
+  })
+  isPreviewOpen.value = true
+}
+
+const copyPrompt = async () => {
+  await copy(capitalizedPrompt.value)
+  triggerNotification({
+    type: ToastNotificationType.Info,
+    title: 'Prompt copied to clipboard'
+  })
+}
 </script>
diff --git a/packages/frontend-2/components/viewer/gendo/List.vue b/packages/frontend-2/components/viewer/gendo/List.vue
index 7b02f927f1..4ea916c06d 100644
--- a/packages/frontend-2/components/viewer/gendo/List.vue
+++ b/packages/frontend-2/components/viewer/gendo/List.vue
@@ -1,9 +1,12 @@
 <template>
-  <div class="space-y-4 mt-4">
+  <div
+    class="flex flex-col gap-y-2 max-h-64 2xl:max-h-96 overflow-y-scroll overflow-x-hidden simple-scroll pb-4"
+  >
     <ViewerGendoItem
       v-for="render in renders"
       :key="render?.id"
       :render-request="render"
+      @reuse-prompt="$emit('reuse-prompt', $event)"
     />
   </div>
 </template>
@@ -15,6 +18,11 @@ import {
   onGendoAiRenderCreated
 } from '~/lib/gendo/graphql/queriesAndMutations'
 import { useInjectedViewerState } from '~/lib/viewer/composables/setup'
+
+defineEmits<{
+  (e: 'reuse-prompt', prompt: string): void
+}>()
+
 const {
   projectId,
   resources: {
diff --git a/packages/frontend-2/components/viewer/gendo/Panel.vue b/packages/frontend-2/components/viewer/gendo/Panel.vue
index c7dc1ed214..055f27977b 100644
--- a/packages/frontend-2/components/viewer/gendo/Panel.vue
+++ b/packages/frontend-2/components/viewer/gendo/Panel.vue
@@ -1,79 +1,91 @@
 <template>
-  <ViewerLayoutPanel move-actions-to-bottom @close="$emit('close')">
+  <ViewerLayoutPanel @close="$emit('close')">
     <template #title>
-      <span class="text-foreground">AI Render by</span>
-      <CommonTextLink
-        text
-        link
-        class="ml-1"
-        to="https://gendo.ai?utm=speckle"
-        target="_blank"
-      >
-        Gendo
-      </CommonTextLink>
-
-      <span class="text-foreground-2">&nbsp;(Beta)</span>
+      <div class="flex gap-1 items-center">
+        <span class="text-foreground border-b border-transparent">AI Render by</span>
+        <NuxtLink
+          class="flex gap-1 items-center border-b border-outline-3 hover:border-outline-5 pb-px leading-none mt-0.5"
+          to="https://gendo.ai?utm=speckle"
+          target="_blank"
+        >
+          Gendo
+        </NuxtLink>
+        <CommonBadge color-classes="bg-highlight-3 text-foreground-2 scale-90">
+          BETA
+        </CommonBadge>
+      </div>
     </template>
-    <div class="p-2">
-      <div class="space-y-2 flex flex-col mt-2">
-        <FormTextArea
-          v-model="prompt"
-          name="prompt"
-          label=""
-          size="lg"
-          placeholder="Your prompt"
-        />
-        <div class="flex justify-end space-x-2 items-center">
-          <div v-if="limits" class="text-xs text-foreground-2">
-            You have used {{ limits.used }} out of {{ limits.limit }} monthly free
-            renders.
+    <div class="pt-2">
+      <div class="px-4 flex flex-col gap-y-2">
+        <CommonAlert v-if="showAlert" :color="alertColor" size="xs">
+          <template #title>
+            {{ alertMessage }}
+          </template>
+        </CommonAlert>
+        <div class="flex flex-col gap-y-2">
+          <FormTextArea
+            v-model="prompt"
+            name="prompt"
+            size="lg"
+            :placeholder="randomPlaceholder"
+            color="foundation"
+            :disabled="isLoading || timeOutWait || isOutOfCredits"
+            textarea-classes="sm:!min-h-24"
+          />
+          <div class="flex justify-between gap-2 items-center text-foreground-2">
+            <FormButton
+              color="outline"
+              size="sm"
+              external
+              to="https://www.gendo.ai/terms-of-service?utm=speckle"
+              target="_blank"
+            >
+              <div class="flex items-center gap-1 text-foreground-2 font-normal">
+                <span>Writing prompts</span>
+                <ArrowTopRightOnSquareIcon class="h-3 w-3" />
+              </div>
+            </FormButton>
+
+            <FormButton
+              :disabled="!prompt || isLoading || timeOutWait || isOutOfCredits"
+              @click="enqueMagic()"
+            >
+              Generate
+            </FormButton>
           </div>
-          <FormButton
-            v-if="(limits?.used || 1) < (limits?.limit || 0)"
-            :disabled="
-              !prompt ||
-              isLoading ||
-              timeOutWait ||
-              (limits?.used || 0) >= (limits?.limit || 0)
-            "
-            @click="enqueMagic()"
-          >
-            Render
-          </FormButton>
-          <FormButton v-else to="https://gendo.ai?utm=speckle" target="_blank">
-            Visit Gendo
-          </FormButton>
         </div>
+        <ViewerGendoList @reuse-prompt="prompt = $event" />
+      </div>
+      <div
+        class="flex w-full items-center justify-between gap-2 border-t border-outline-2 py-1 px-2"
+      >
+        <FormButton color="subtle" size="sm" @click="isFeedbackOpen = true">
+          <div class="flex items-center gap-1 text-foreground-2 font-normal">
+            <IconFeedback class="h-3 w-3" />
+            <span>Feedback</span>
+          </div>
+        </FormButton>
+        <FormButton
+          color="subtle"
+          size="sm"
+          external
+          to="https://www.gendo.ai/terms-of-service"
+          target="_blank"
+        >
+          <div class="flex items-center gap-1 text-foreground-2 font-normal">
+            <span>Terms</span>
+            <ArrowTopRightOnSquareIcon class="h-3 w-3" />
+          </div>
+        </FormButton>
       </div>
-      <ViewerGendoList />
     </div>
-    <template #actions>
-      <div class="flex grow items-center justify-between">
-        <span class="text-foreground-2 text-sm">
-          <CommonTextLink
-            text
-            link
-            class="mr-2"
-            to="https://www.gendo.ai/terms-of-service"
-            target="_blank"
-          >
-            Terms and conditions
-          </CommonTextLink>
-        </span>
-        <div>
-          <span class="text-foreground-2 text-sm">More about</span>
-          <CommonTextLink
-            text
-            link
-            class="ml-1"
-            to="https://gendo.ai?utm=speckle"
-            target="_blank"
-          >
-            Gendo
-          </CommonTextLink>
-        </div>
+    <template v-if="!showAlert && limits" #actions>
+      <div class="text-body-2xs p-1">
+        {{ limits.used }}/{{ limits.limit }} free renders used
+        <span class="hidden-under-250">this month</span>
       </div>
     </template>
+    <FeedbackDialog v-model:open="isFeedbackOpen" type="gendo" />
   </ViewerLayoutPanel>
 </template>
 <script setup lang="ts">
@@ -87,6 +99,8 @@ import {
 } from '~~/lib/gendo/graphql/queriesAndMutations'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
 import { useMixpanel } from '~/lib/core/composables/mp'
+import { CommonAlert, CommonBadge } from '@speckle/ui-components'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
 
 const {
   projectId,
@@ -104,6 +118,15 @@ defineEmits<{
 const prompt = ref<string>()
 const isLoading = ref(false)
 const timeOutWait = ref(false)
+const isFeedbackOpen = ref(false)
+
+const suggestedPrompts = ref<string[]>([
+  'Example: Minimalist Scandinavian interior with warm natural lighting',
+  'Example: Luxury penthouse with floor-to-ceiling windows and city views',
+  'Example: Cozy industrial loft with exposed brick and steel elements',
+  'Example: Modern office space with biophilic design elements',
+  'Example: High-end retail space with dramatic lighting'
+])
 
 const { result, refetch } = useQuery(activeUserGendoLimits)
 
@@ -111,6 +134,36 @@ const limits = computed(() => {
   return result?.value?.activeUser?.gendoAICredits
 })
 
+const randomPlaceholder = computed(() => {
+  const randomIndex = Math.floor(Math.random() * suggestedPrompts.value.length)
+  return suggestedPrompts.value[randomIndex]
+})
+
+const isOutOfCredits = computed(() => {
+  return (limits.value?.used || 0) >= (limits.value?.limit || 0)
+})
+
+const isNearingLimit = computed(() => {
+  if (!limits.value) return
+  const usagePercent = (limits.value?.used / limits.value?.limit) * 100
+  return usagePercent >= 80
+})
+
+const alertColor = computed(() => {
+  if (isOutOfCredits.value) return 'danger'
+  if (isNearingLimit.value) return 'warning'
+  return 'neutral'
+})
+
+const alertMessage = computed(() => {
+  if (!limits.value) return 'No credits available'
+  return `${limits.value.used}/${limits.value.limit} free renders used this month`
+})
+
+const showAlert = computed(
+  () => !limits.value || isNearingLimit.value || isOutOfCredits.value
+)
+
 const enqueMagic = async () => {
   isLoading.value = true
   const [depthData, width, height] = await viewerInstance
diff --git a/packages/ui-components/src/components/layout/Dialog.stories.ts b/packages/ui-components/src/components/layout/Dialog.stories.ts
index 524df391ec..00e0da036a 100644
--- a/packages/ui-components/src/components/layout/Dialog.stories.ts
+++ b/packages/ui-components/src/components/layout/Dialog.stories.ts
@@ -146,3 +146,28 @@ export const WithOverflowingTooltip: StoryObj = {
     </div>`
   })
 }
+
+export const Transparent: StoryObj = {
+  ...Default,
+  args: {
+    ...Default.args,
+    isTransparent: true,
+    maxWidth: 'md'
+  },
+  render: (args) => ({
+    components: { LayoutDialog, FormButton },
+    setup() {
+      const open = ref(false)
+      return { args, open }
+    },
+    template: `<div>
+      <FormButton @click="() => open = true">Open Transparent Dialog</FormButton>
+      <LayoutDialog v-model:open="open" v-bind="args">
+        <div class="flex flex-col space-y-4">
+          <div class="h4 font-semibold">Transparent Background</div>
+          <div>This dialog has a transparent background, useful for custom styling or overlay purposes.</div>
+        </div>
+      </LayoutDialog>
+    </div>`
+  })
+}
diff --git a/packages/ui-components/src/components/layout/Dialog.vue b/packages/ui-components/src/components/layout/Dialog.vue
index d3502a7d87..184ce33f98 100644
--- a/packages/ui-components/src/components/layout/Dialog.vue
+++ b/packages/ui-components/src/components/layout/Dialog.vue
@@ -158,6 +158,7 @@ const props = withDefaults(
      * If set, the modal will be wrapped in a form element and the `onSubmit` callback will be invoked when the user submits the form
      */
     onSubmit?: (e: SubmitEvent) => void
+    isTransparent?: boolean
   }>(),
   {
     fullscreen: 'mobile'
@@ -237,9 +238,13 @@ const isFullscreenDesktop = computed(
 
 const dialogPanelClasses = computed(() => {
   const classParts: string[] = [
-    'transform md:rounded-xl text-foreground overflow-hidden transition-all bg-foundation-page text-left shadow-xl border border-outline-2 flex flex-col md:h-auto'
+    'transform md:rounded-xl text-foreground overflow-hidden transition-all text-left flex flex-col md:h-auto'
   ]
 
+  if (!props.isTransparent) {
+    classParts.push('bg-foundation-page shadow-xl border border-outline-2')
+  }
+
   if (isFullscreenDesktop.value) {
     classParts.push('md:h-full')
   } else {