geo/apps/admin-web/src/components/editor-common/EditorAiAssistPanel.vue

<script setup lang="ts">
import {
  CheckOutlined,
  CloseOutlined,
  DeleteOutlined,
  LoadingOutlined,
  RedoOutlined,
} from '@ant-design/icons-vue'
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type CSSProperties } from 'vue'

type EditorAiAssistStatus = 'idle' | 'generating' | 'completed' | 'error'
type EditorAiAssistBoundary = {
  left: number
  top: number
  right: number
  bottom: number
}
type EditorAiAssistPlacement = 'bottom' | 'top'

const props = defineProps<{
  x: number
  y: number
  width: number
  boundary?: EditorAiAssistBoundary | null
  boundaryElement?: HTMLElement | null
  placement?: EditorAiAssistPlacement
  prompt: string
  status: EditorAiAssistStatus
  streaming: boolean
  hasPreview: boolean
  error: string
  title: string
  promptPlaceholder: string
  continuePlaceholder?: string
  loadingLabel: string
  errorLabel: string
  disclaimer: string
  historyLabel?: string
  regenerateLabel: string
  discardLabel: string
  applyLabel: string
}>()

const emit = defineEmits<{
  'update:prompt': [value: string]
  submit: []
  close: []
  reset: []
  apply: []
}>()

const IDLE_MAX_WIDTH = 760
const PANEL_OFFSET = 16
const MIN_PANEL_WIDTH = 240
const RESULT_CHROME_HEIGHT = 176

const panelRef = ref<HTMLElement | null>(null)
const resultContentRef = ref<HTMLElement | null>(null)
const promptInputRef = ref<HTMLInputElement | null>(null)
const frame = ref({
  x: props.x,
  y: props.y,
  width: props.width,
  maxHeight: 480,
  resultMaxHeight: 300,
})
let resizeObserver: ResizeObserver | null = null
let mutationObserver: MutationObserver | null = null
let syncFrameId = 0
let scrollFrameId = 0

const promptValue = computed({
  get: () => props.prompt,
  set: (value: string) => {
    emit('update:prompt', value)
  },
})

const resolvedContinuePlaceholder = computed(
  () => props.continuePlaceholder?.trim() || props.promptPlaceholder,
)

const panelStyle = computed<CSSProperties>(
  () =>
    ({
      left: `${frame.value.x}px`,
      top: `${frame.value.y}px`,
      width: `${frame.value.width}px`,
      maxHeight: `${frame.value.maxHeight}px`,
      '--editor-ai-assist-result-max-height': `${frame.value.resultMaxHeight}px`,
    }) as CSSProperties,
)

function clamp(value: number, min: number, max: number): number {
  return Math.min(Math.max(value, min), max)
}

function normalizeBoundary(
  rawBoundary: EditorAiAssistBoundary | null | undefined,
): EditorAiAssistBoundary {
  const viewportBoundary = {
    left: 0,
    top: 0,
    right: window.innerWidth,
    bottom: window.innerHeight,
  }
  if (!rawBoundary) {
    return viewportBoundary
  }

  const left = clamp(rawBoundary.left, 0, window.innerWidth)
  const top = clamp(rawBoundary.top, 0, window.innerHeight)
  const right = clamp(rawBoundary.right, left, window.innerWidth)
  const bottom = clamp(rawBoundary.bottom, top, window.innerHeight)

  if (right - left < 1 || bottom - top < 1) {
    return viewportBoundary
  }

  return { left, top, right, bottom }
}

function resolveBoundary(): EditorAiAssistBoundary {
  if (props.boundaryElement) {
    const rect = props.boundaryElement.getBoundingClientRect()
    return normalizeBoundary({
      left: rect.left,
      top: rect.top,
      right: rect.right,
      bottom: rect.bottom,
    })
  }
  return normalizeBoundary(props.boundary)
}

function updateFrame(nextFrame: typeof frame.value): void {
  const current = frame.value
  const hasChanged =
    Math.abs(current.x - nextFrame.x) > 0.5 ||
    Math.abs(current.y - nextFrame.y) > 0.5 ||
    Math.abs(current.width - nextFrame.width) > 0.5 ||
    Math.abs(current.maxHeight - nextFrame.maxHeight) > 0.5 ||
    Math.abs(current.resultMaxHeight - nextFrame.resultMaxHeight) > 0.5

  if (hasChanged) {
    frame.value = nextFrame
  }
}

function scrollResultContentToLatest(): void {
  if (!(props.streaming || props.status === 'generating')) {
    return
  }

  if (scrollFrameId) {
    cancelAnimationFrame(scrollFrameId)
  }
  scrollFrameId = requestAnimationFrame(() => {
    scrollFrameId = 0
    const resultContent = resultContentRef.value
    if (resultContent) {
      resultContent.scrollTop = resultContent.scrollHeight
    }
  })
}

function handleResultContentChanged(): void {
  schedulePanelFrameSync()
  scrollResultContentToLatest()
}

function syncPanelFrame(): void {
  void nextTick(() => {
    const panel = panelRef.value
    if (!panel) {
      return
    }

    const boundary = resolveBoundary()
    const availableWidth = Math.max(0, boundary.right - boundary.left - PANEL_OFFSET * 2)
    const maxWidth = Math.max(160, availableWidth)
    const minWidth = Math.min(MIN_PANEL_WIDTH, maxWidth)
    const width =
      props.status === 'idle'
        ? clamp(Math.min(props.width, IDLE_MAX_WIDTH), minWidth, maxWidth)
        : clamp(props.width, minWidth, maxWidth)
    const placement = props.placement ?? 'bottom'
    const anchorY = clamp(props.y, boundary.top + PANEL_OFFSET, boundary.bottom - PANEL_OFFSET)
    const availableHeight = Math.max(
      120,
      placement === 'top'
        ? anchorY - boundary.top - PANEL_OFFSET
        : boundary.bottom - anchorY - PANEL_OFFSET,
    )
    const panelHeight = Math.min(panel.offsetHeight || availableHeight, availableHeight)
    const resultMaxHeight = Math.max(48, availableHeight - RESULT_CHROME_HEIGHT)
    const panelTop = placement === 'top' ? anchorY - panelHeight : anchorY

    updateFrame({
      x: clamp(
        props.x - width / 2,
        boundary.left + PANEL_OFFSET,
        Math.max(boundary.left + PANEL_OFFSET, boundary.right - width - PANEL_OFFSET),
      ),
      y: clamp(
        panelTop,
        boundary.top + PANEL_OFFSET,
        Math.max(boundary.top + PANEL_OFFSET, boundary.bottom - panelHeight - PANEL_OFFSET),
      ),
      width,
      maxHeight: availableHeight,
      resultMaxHeight,
    })
    scrollResultContentToLatest()
  })
}

function schedulePanelFrameSync(): void {
  if (syncFrameId) {
    cancelAnimationFrame(syncFrameId)
  }
  syncFrameId = requestAnimationFrame(() => {
    syncFrameId = 0
    syncPanelFrame()
  })
}

function focusPromptInput(): void {
  if (props.status !== 'idle') {
    return
  }

  void nextTick(() => {
    promptInputRef.value?.focus()
    promptInputRef.value?.setSelectionRange(props.prompt.length, props.prompt.length)
  })
}

function handleWindowResize(): void {
  syncPanelFrame()
}

function refreshResultContentObserver(): void {
  void nextTick(() => {
    mutationObserver?.disconnect()
    const resultContent = resultContentRef.value
    if (!resultContent) {
      return
    }

    mutationObserver?.observe(resultContent, {
      childList: true,
      characterData: true,
      subtree: true,
    })
    scrollResultContentToLatest()
  })
}

watch(
  () => ({
    x: props.x,
    y: props.y,
    width: props.width,
    status: props.status,
    hasPreview: props.hasPreview,
    error: props.error,
    boundary: props.boundary,
    boundaryElement: props.boundaryElement,
    placement: props.placement,
  }),
  () => {
    syncPanelFrame()
    refreshResultContentObserver()
    focusPromptInput()
  },
  {
    immediate: true,
    flush: 'post',
  },
)

onMounted(() => {
  window.addEventListener('resize', handleWindowResize)
  mutationObserver = new MutationObserver(handleResultContentChanged)
  if ('ResizeObserver' in window) {
    resizeObserver = new ResizeObserver(schedulePanelFrameSync)
    if (panelRef.value) {
      resizeObserver.observe(panelRef.value)
    }
  }
  refreshResultContentObserver()
  syncPanelFrame()
  focusPromptInput()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleWindowResize)
  mutationObserver?.disconnect()
  mutationObserver = null
  resizeObserver?.disconnect()
  resizeObserver = null
  if (syncFrameId) {
    cancelAnimationFrame(syncFrameId)
    syncFrameId = 0
  }
  if (scrollFrameId) {
    cancelAnimationFrame(scrollFrameId)
    scrollFrameId = 0
  }
})
</script>

<template>
  <Teleport to="body">
    <div
      ref="panelRef"
      class="editor-ai-assist"
      :style="panelStyle"
      @pointerdown.stop
      @contextmenu.prevent
    >
      <div class="editor-ai-assist__shell">
        <div v-if="status === 'idle'" class="editor-ai-assist__bar">
          <div class="editor-ai-assist__bar-icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                d="M6.75 15.25L8.78 9.78L14.25 7.75L12.22 13.22L6.75 15.25Z"
                stroke="url(#editor-ai-assist-gradient)"
                stroke-width="2"
                stroke-linejoin="round"
              />
              <path
                d="M14.5 4.5L15.07 6.43L17 7L15.07 7.57L14.5 9.5L13.93 7.57L12 7L13.93 6.43L14.5 4.5Z"
                fill="url(#editor-ai-assist-gradient)"
              />
              <path
                d="M18 13L18.58 14.92L20.5 15.5L18.58 16.08L18 18L17.42 16.08L15.5 15.5L17.42 14.92L18 13Z"
                fill="url(#editor-ai-assist-gradient)"
              />
              <defs>
                <linearGradient
                  id="editor-ai-assist-gradient"
                  x1="4.5"
                  y1="4.5"
                  x2="20.5"
                  y2="18.5"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#245bdb" />
                  <stop offset="1" stop-color="#ef5da8" />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <span class="editor-ai-assist__bar-label">{{ title }}</span>
          <input
            ref="promptInputRef"
            v-model="promptValue"
            type="text"
            class="editor-ai-assist__bar-input"
            :placeholder="promptPlaceholder"
            @keydown.enter.prevent="emit('submit')"
          />
          <div class="editor-ai-assist__bar-actions">
            <button type="button" class="editor-ai-assist__icon-button" @click="emit('close')">
              <CloseOutlined />
            </button>
            <span class="editor-ai-assist__divider"></span>
            <button type="button" class="editor-ai-assist__send-button" @click="emit('submit')">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <line x1="22" y1="2" x2="11" y2="13"></line>
                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
              </svg>
            </button>
          </div>
        </div>

        <div v-else class="editor-ai-assist__result">
          <div class="editor-ai-assist__result-box">
            <div ref="resultContentRef" class="editor-ai-assist__result-content">
              <slot v-if="hasPreview" name="preview"></slot>
              <div v-else-if="streaming" class="editor-ai-assist__placeholder">
                <LoadingOutlined />
                <span>{{ loadingLabel }}</span>
              </div>
              <div
                v-else
                class="editor-ai-assist__placeholder editor-ai-assist__placeholder--error"
              >
                {{ error || errorLabel }}
              </div>
            </div>
            <div class="editor-ai-assist__result-footer">
              <span>{{ disclaimer }}</span>
              <span class="editor-ai-assist__result-badges">
                <CheckOutlined />
                <span class="editor-ai-assist__thumb">👍</span>
                <span class="editor-ai-assist__thumb editor-ai-assist__thumb--down">👍</span>
              </span>
            </div>
          </div>

          <div class="editor-ai-assist__toolbar">
            <div class="editor-ai-assist__toolbar-head">
              <button type="button" class="editor-ai-assist__back-button" @click="emit('reset')">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <line x1="19" y1="12" x2="5" y2="12"></line>
                  <polyline points="12 19 5 12 12 5"></polyline>
                </svg>
                <span>{{ title }}</span>
              </button>
              <div class="editor-ai-assist__history">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="14"
                  height="14"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
                <span>{{ historyLabel || '1/1' }}</span>
                <button
                  type="button"
                  class="editor-ai-assist__icon-button editor-ai-assist__icon-button--close"
                  @click="emit('close')"
                >
                  <CloseOutlined />
                </button>
              </div>
            </div>

            <div class="editor-ai-assist__toolbar-body">
              <div class="editor-ai-assist__continue">
                <input
                  v-model="promptValue"
                  type="text"
                  :placeholder="resolvedContinuePlaceholder"
                  @keydown.enter.prevent="emit('submit')"
                />
                <button
                  type="button"
                  class="editor-ai-assist__continue-send"
                  @click="emit('submit')"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <line x1="22" y1="2" x2="11" y2="13"></line>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                  </svg>
                </button>
              </div>
              <div class="editor-ai-assist__toolbar-actions">
                <button
                  type="button"
                  class="editor-ai-assist__toolbar-button"
                  @click="emit('submit')"
                >
                  <RedoOutlined />
                  <span>{{ regenerateLabel }}</span>
                </button>
                <button
                  type="button"
                  class="editor-ai-assist__toolbar-button"
                  @click="emit('close')"
                >
                  <DeleteOutlined />
                  <span>{{ discardLabel }}</span>
                </button>
                <button
                  type="button"
                  class="editor-ai-assist__toolbar-button editor-ai-assist__toolbar-button--primary"
                  @click="emit('apply')"
                >
                  <span>{{ applyLabel }}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.editor-ai-assist {
  position: fixed;
  z-index: 1300;
  max-width: min(1120px, calc(100vw - 32px));
  /* Removed overflow: hidden to prevent shadow clipping */
}

.editor-ai-assist__shell {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  min-height: 0;
}

.editor-ai-assist__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    0 16px 48px -4px rgba(17, 24, 39, 0.12),
    0 6px 20px -4px rgba(17, 24, 39, 0.08);
  transition: all 0.2s ease;
}

.editor-ai-assist__bar:focus-within {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow:
    0 12px 32px -4px rgba(37, 99, 235, 0.12),
    0 4px 16px -4px rgba(37, 99, 235, 0.06),
    0 0 0 3px rgba(37, 99, 235, 0.1);
}

.editor-ai-assist__bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -4px;
}

.editor-ai-assist__bar-label {
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.editor-ai-assist__bar-input {
  flex: 1;
  min-width: 280px;
  border: none;
  outline: none;
  background: transparent;
  color: #111827;
  font-size: 14px;
  font-weight: 500;
}

.editor-ai-assist__bar-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.editor-ai-assist__bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-ai-assist__divider {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: #e5e7eb;
}

.editor-ai-assist__icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.editor-ai-assist__icon-button:hover {
  background: #f3f4f6;
  color: #111827;
}

.editor-ai-assist__send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.editor-ai-assist__send-button:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.editor-ai-assist__send-button:active {
  transform: translateY(0);
}

.editor-ai-assist__result {
  width: 100%;
  max-height: inherit;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow:
    0 16px 48px -4px rgba(17, 24, 39, 0.12),
    0 6px 20px -4px rgba(17, 24, 39, 0.08);
}

.editor-ai-assist__result-box {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  flex-direction: column;
  margin: 12px;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 12px;
  background: #f9fafb;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.editor-ai-assist__result-content {
  flex: 1 1 auto;
  min-height: min(80px, var(--editor-ai-assist-result-max-height, 80px));
  max-height: var(--editor-ai-assist-result-max-height, 300px);
  padding: 16px;
  overflow-y: auto;
  color: #111827;
  font-size: 14px;
  line-height: 1.6;
}

.editor-ai-assist__placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
}

.editor-ai-assist__placeholder--error {
  color: #ef4444;
}

.editor-ai-assist__result-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid rgba(229, 231, 235, 0.8);
  background: rgba(255, 255, 255, 0.5);
  color: #9ca3af;
  font-size: 12px;
}

.editor-ai-assist__result-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.editor-ai-assist__result-badges :deep(svg) {
  color: #10b981;
}

.editor-ai-assist__thumb {
  font-size: 14px;
}

.editor-ai-assist__thumb--down {
  display: inline-block;
  transform: scaleY(-1);
}

.editor-ai-assist__toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px;
}

.editor-ai-assist__toolbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #6b7280;
  font-size: 13px;
}

.editor-ai-assist__back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.2s ease;
}

.editor-ai-assist__back-button:hover {
  color: #111827;
}

.editor-ai-assist__history {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.editor-ai-assist__icon-button--close {
  margin-left: 8px;
}

.editor-ai-assist__toolbar-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.editor-ai-assist__continue {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 4px 4px 4px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.editor-ai-assist__continue:focus-within {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.02),
    0 0 0 2px rgba(37, 99, 235, 0.1);
}

.editor-ai-assist__continue input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #111827;
  font-size: 13px;
}

.editor-ai-assist__continue-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.2s ease;
}

.editor-ai-assist__continue-send:hover {
  background: #dbeafe;
  color: #1d4ed8;
}

.editor-ai-assist__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-ai-assist__toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(17, 24, 39, 0.05);
  border-radius: 8px;
  background: #ffffff;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.editor-ai-assist__toolbar-button:hover {
  background: #f9fafb;
  color: #111827;
  border-color: rgba(17, 24, 39, 0.1);
}

.editor-ai-assist__toolbar-button--primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.editor-ai-assist__toolbar-button--primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .editor-ai-assist {
    max-width: calc(100vw - 24px);
  }

  .editor-ai-assist__bar {
    flex-wrap: wrap;
    border-radius: 16px;
  }

  .editor-ai-assist__bar-input {
    min-width: 100%;
  }

  .editor-ai-assist__toolbar-body {
    flex-direction: column;
    align-items: stretch;
  }

  .editor-ai-assist__toolbar-actions {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .editor-ai-assist__toolbar-button {
    justify-content: center;
    flex: 1 1 calc(50% - 8px);
  }

  .editor-ai-assist__toolbar-button--primary {
    flex-basis: 100%;
  }
}
</style>