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>