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";

const props = defineProps<{
  x: number;
  y: number;
  width: number;
  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 panelRef = ref<HTMLElement | null>(null);
const promptInputRef = ref<HTMLInputElement | null>(null);
const frame = ref({
  x: props.x,
  y: props.y,
  width: props.width,
});

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`,
}));

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

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

    const offset = 16;
    const maxWidth = Math.max(240, window.innerWidth - offset * 2);
    const width =
      props.status === "idle"
        ? Math.min(props.width, maxWidth, IDLE_MAX_WIDTH)
        : Math.min(props.width, maxWidth);
    frame.value = {
      x: clamp(props.x - width / 2, offset, Math.max(offset, window.innerWidth - width - offset)),
      y: clamp(props.y, offset, Math.max(offset, window.innerHeight - panel.offsetHeight - offset)),
      width,
    };
  });
}

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();
}

watch(
  () => ({
    x: props.x,
    y: props.y,
    width: props.width,
    status: props.status,
    hasPreview: props.hasPreview,
    error: props.error,
  }),
  () => {
    syncPanelFrame();
    focusPromptInput();
  },
  {
    immediate: true,
    flush: "post",
  },
);

onMounted(() => {
  window.addEventListener("resize", handleWindowResize);
  syncPanelFrame();
  focusPromptInput();
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleWindowResize);
});
</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 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));
}

.editor-ai-assist__shell {
  display: flex;
  flex-direction: column;
}

.editor-ai-assist__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
   0 8px 32px rgb(17 17 17 / 28%), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

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

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

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

.editor-ai-assist__bar-input::placeholder {
  color: #98a2b3;
}

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

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

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

.editor-ai-assist__icon-button:hover {
  background: #f2f4f7;
  color: #344054;
}

.editor-ai-assist__send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: #245bdb;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(36, 91, 219, 0.28);
}

.editor-ai-assist__send-button:hover {
  background: #1d4fc4;
}

.editor-ai-assist__result {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 8px 32px rgb(17 17 17 / 28%), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.editor-ai-assist__result-box {
  margin: 12px;
  overflow: hidden;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  background: #f8fafc;
}

.editor-ai-assist__result-content {
  min-height: 80px;
  max-height: 300px;
  padding: 16px;
  overflow-y: auto;
  color: #101828;
  font-size: 15px;
  line-height: 1.6;
}

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

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

.editor-ai-assist__result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(255, 255, 255, 0.5);
  color: #94a3b8;
  font-size: 12px;
}

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

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

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

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

.editor-ai-assist__toolbar {
  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: #64748b;
  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;
}

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

.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 #e2e8f0;
  border-radius: 20px;
  background: #f8fafc;
}

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

.editor-ai-assist__continue-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: #e8efff;
  color: #245bdb;
  cursor: pointer;
}

.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: none;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.editor-ai-assist__toolbar-button:hover {
  background: #f1f5f9;
}

.editor-ai-assist__toolbar-button--primary {
  background: #245bdb;
  color: #ffffff;
}

.editor-ai-assist__toolbar-button--primary:hover {
  background: #1d4fc4;
}

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

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

  .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>