@orvui/vue 0.0.0-stage → 0.1.0

package/src/agents/prompt-input/src/PromptInput.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useAttrs,
+  watch,
+} from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { ArrowUp, Plus, Square } from "lucide-vue-next";
+import { Button } from "../../../motion/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../../../motion/select";
+import {
+  MorphPopover,
+  MorphPopoverContent,
+  MorphPopoverTrigger,
+} from "../../../motion/popover";
+import { SPRING_SWAP } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import {
+  RenderNode,
+  useControllable,
+  useReduced,
+  type Content,
+} from "../../shared";
+export interface PromptModel {
+  value: string;
+  label: Content;
+  icon?: Content;
+  disabled?: boolean;
+}
+export interface PromptAction {
+  value: string;
+  label: Content;
+  description?: Content;
+  icon?: Content;
+  disabled?: boolean;
+}
+defineOptions({ inheritAttrs: false });
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    defaultValue?: string;
+    models?: PromptModel[];
+    model?: string;
+    defaultModel?: string;
+    actions?: PromptAction[];
+    loading?: boolean;
+    minRows?: number;
+    maxRows?: number;
+    disabled?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    defaultValue: "",
+    models: () => [],
+    actions: () => [],
+    loading: false,
+    minRows: 2,
+    maxRows: 8,
+    placeholder: "Ask the agent to do something…",
+  },
+);
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  valueChange: [value: string];
+  "update:model": [value: string];
+  modelChange: [value: string];
+  action: [action: string];
+  submit: [value: string, model?: string];
+  stop: [];
+}>();
+const value = useControllable(
+  () => props.modelValue,
+  props.defaultValue,
+  (next) => {
+    emit("update:modelValue", next);
+    emit("valueChange", next);
+  },
+);
+const selected = useControllable(
+  () => props.model,
+  props.defaultModel ?? props.models[0]?.value,
+  (next) => {
+    if (next !== undefined) {
+      emit("update:model", next);
+      emit("modelChange", next);
+    }
+  },
+);
+const selectedModel = computed(() =>
+  props.models.find((item) => item.value === selected.value),
+);
+const ready = computed(
+  () => value.value.trim().length > 0 && !props.disabled && !props.loading,
+);
+const textarea = ref<HTMLTextAreaElement>();
+const measurement = ref<HTMLElement>();
+const menu = ref(false);
+const reduced = useReduced();
+const attrs = useAttrs();
+const instance = getCurrentInstance();
+const stoppable = () => !!instance?.vnode.props?.onStop;
+const inputAttributes = () =>
+  Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style"),
+  );
+let observer: ResizeObserver | undefined,
+  alive = false;
+function fit() {
+  if (!alive || !textarea.value || !measurement.value) return;
+  const height = Math.min(
+    props.maxRows * 24,
+    Math.max(props.minRows * 24, measurement.value.scrollHeight),
+  );
+  textarea.value.style.height = `${height}px`;
+}
+function input(event: Event) {
+  const element = event.target as HTMLTextAreaElement;
+  value.value = element.value;
+  nextTick(() => {
+    if (!alive) return;
+    if (props.modelValue !== undefined) element.value = props.modelValue;
+    fit();
+  });
+}
+function submit() {
+  if (!ready.value) return;
+  emit("submit", value.value.trim(), selected.value);
+  if (props.modelValue === undefined) value.value = "";
+  textarea.value?.focus({ preventScroll: true });
+}
+function keydown(event: KeyboardEvent) {
+  if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+  event.preventDefault();
+  submit();
+}
+function choose(action: PromptAction) {
+  if (!action.disabled) {
+    emit("action", action.value);
+    menu.value = false;
+  }
+}
+watch([value, () => props.minRows, () => props.maxRows], () => nextTick(fit));
+onMounted(() => {
+  alive = true;
+  fit();
+  if (textarea.value && typeof ResizeObserver !== "undefined") {
+    observer = new ResizeObserver(fit);
+    observer.observe(textarea.value);
+  }
+});
+onBeforeUnmount(() => {
+  alive = false;
+  observer?.disconnect();
+});
+</script>
+<template>
+  <form
+    :class="
+      cn(
+        'relative w-full rounded-2xl border border-border/80 bg-background p-2 transition-colors focus-within:border-foreground/40',
+        disabled && 'opacity-60',
+        $attrs.class,
+      )
+    "
+    :style="$attrs.style as any"
+    @submit.prevent="submit"
+  >
+    <div
+      ref="measurement"
+      aria-hidden="true"
+      class="pointer-events-none invisible absolute inset-x-2 top-0 whitespace-pre-wrap px-2 text-sm leading-6 [overflow-wrap:break-word]"
+    >
+      {{ value + "​" }}
+    </div>
+    <textarea
+      ref="textarea"
+      v-bind="inputAttributes()"
+      :value="value"
+      :rows="minRows"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :aria-label="($attrs['aria-label'] as string) || 'Prompt'"
+      class="scrollbar-hide block w-full resize-none overflow-y-auto bg-transparent px-2 pt-1.5 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground/55"
+      @input="input"
+      @keydown="keydown"
+    />
+    <div class="mt-1 flex min-h-8 items-center gap-1">
+      <MorphPopover v-if="actions.length" v-model:open="menu"
+        ><MorphPopoverTrigger
+          ><Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            :disabled="disabled || loading"
+            aria-label="Add to prompt"
+            class="size-8 rounded-full"
+            ><motion.span
+              aria-hidden="true"
+              :animate="{ rotate: menu ? 45 : 0 }"
+              :transition="reduced ? { duration: 0 } : SPRING_SWAP"
+              ><Plus class="size-4" /></motion.span></Button
+        ></MorphPopoverTrigger>
+        <MorphPopoverContent
+          side="top"
+          align="start"
+          :side-offset="8"
+          :radius="12"
+          class="w-56 p-1.5"
+        >
+          <button
+            v-for="action in actions"
+            :key="action.value"
+            type="button"
+            :disabled="action.disabled"
+            @click="choose(action)"
+            class="flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left outline-none transition-colors hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50"
+          >
+            <span
+              v-if="action.icon"
+              class="mt-0.5 grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4"
+              ><RenderNode :node="action.icon" /></span
+            ><span class="min-w-0"
+              ><span class="block text-sm"
+                ><RenderNode :node="action.label" /></span
+              ><span
+                v-if="action.description"
+                class="mt-0.5 block text-xs leading-4 text-muted-foreground"
+                ><RenderNode :node="action.description" /></span
+            ></span>
+          </button>
+        </MorphPopoverContent>
+      </MorphPopover>
+      <slot name="leading-action" />
+      <Select
+        v-if="models.length"
+        :model-value="selected"
+        :disabled="disabled || loading"
+        class="min-w-0"
+        @update:model-value="selected = $event"
+        ><SelectTrigger
+          aria-label="AI model"
+          class="h-8 w-auto max-w-52 rounded-xl border-0 bg-transparent px-2 py-0 text-xs hover:bg-muted focus-visible:ring-2"
+          ><span class="flex min-w-0 items-center gap-1.5"
+            ><span
+              v-if="selectedModel?.icon"
+              class="grid size-4 shrink-0 place-items-center text-muted-foreground [&_svg]:size-3.5"
+              ><RenderNode :node="selectedModel.icon" /></span
+            ><span class="truncate text-muted-foreground"
+              ><RenderNode
+                :node="selectedModel?.label ?? 'Choose model'" /></span></span
+        ></SelectTrigger>
+        <SelectContent class="right-auto w-52 shadow-none"
+          ><SelectItem
+            v-for="option in models"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.disabled"
+            class="py-2"
+            ><span class="flex min-w-0 items-center gap-2"
+              ><span
+                v-if="option.icon"
+                class="grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4"
+                ><RenderNode :node="option.icon" /></span
+              ><span class="min-w-0 truncate text-sm"
+                ><RenderNode :node="option.label" /></span></span></SelectItem
+        ></SelectContent>
+      </Select>
+      <Button
+        :type="loading ? 'button' : 'submit'"
+        size="icon"
+        :disabled="loading ? !stoppable() : !ready"
+        :aria-label="loading ? 'Stop generating' : 'Send prompt'"
+        class="ml-auto size-8 rounded-full"
+        @click="loading && emit('stop')"
+        ><AnimatePresence :initial="false" mode="popLayout"
+          ><motion.span
+            :key="loading ? 'stop' : 'send'"
+            class="grid place-items-center"
+            :initial="
+              reduced ? { opacity: 1 } : { opacity: 0, y: 3, scale: 0.8 }
+            "
+            :animate="{ opacity: 1, y: 0, scale: 1 }"
+            :exit="reduced ? { opacity: 0 } : { opacity: 0, y: -3, scale: 0.8 }"
+            :transition="reduced ? { duration: 0 } : SPRING_SWAP"
+            ><Square v-if="loading" class="size-3 fill-current" /><ArrowUp
+              v-else
+              class="size-4" /></motion.span></AnimatePresence
+      ></Button>
+    </div>
+  </form>
+</template>

package/src/agents/prompt-input/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type PromptInputProps = InstanceType<
+  (typeof import("./PromptInput.vue"))["default"]
+>["$props"];

package/src/agents/shared.ts

@@ -0,0 +1,41 @@
+export {
+  RenderNode,
+  useControllable,
+  useOutside,
+  useReduced,
+  rove,
+  type Content,
+} from "../blocks/shared";
+import { onBeforeUnmount, ref } from "vue";
+
+export function useClipboard(
+  read: () => string,
+  callback?: () => void | Promise<void>,
+) {
+  const copied = ref(false);
+  let reset: ReturnType<typeof setTimeout> | undefined;
+  let generation = 0;
+  let alive = true;
+  async function copy() {
+    const request = ++generation;
+    if (reset !== undefined) clearTimeout(reset);
+    copied.value = false;
+    try {
+      if (callback) await callback();
+      else await navigator.clipboard.writeText(read());
+      if (!alive || request !== generation) return;
+      copied.value = true;
+      reset = setTimeout(() => {
+        if (alive) copied.value = false;
+      }, 1600);
+    } catch {
+      if (alive && request === generation) copied.value = false;
+    }
+  }
+  onBeforeUnmount(() => {
+    alive = false;
+    generation++;
+    if (reset !== undefined) clearTimeout(reset);
+  });
+  return { copied, copy };
+}

package/src/agents/stream-follow.ts

@@ -0,0 +1,53 @@
+import {
+  onBeforeUnmount,
+  onMounted,
+  watch,
+  type Ref,
+  type WatchSource,
+} from "vue";
+
+/** Follow a caller-owned stream only after mount; one queued scroll owns each frame. */
+export function useStreamFollow(
+  element: Ref<HTMLElement | undefined>,
+  enabled: () => boolean,
+  reduced: Ref<boolean>,
+  changes: WatchSource[],
+) {
+  let mounted = false;
+  let pending: number | undefined;
+  const clear = () => {
+    if (pending !== undefined) cancelAnimationFrame(pending);
+    pending = undefined;
+  };
+  function schedule() {
+    clear();
+    if (!mounted || !enabled()) return;
+    pending = requestAnimationFrame(() => {
+      pending = undefined;
+      const viewport = element.value;
+      if (
+        !mounted ||
+        !enabled() ||
+        !viewport ||
+        viewport.scrollHeight <= viewport.clientHeight
+      )
+        return;
+      if (typeof viewport.scrollTo === "function")
+        viewport.scrollTo({
+          top: viewport.scrollHeight,
+          behavior: reduced.value ? "auto" : "smooth",
+        });
+      else viewport.scrollTop = viewport.scrollHeight;
+    });
+  }
+  watch(changes, schedule, { deep: true, flush: "post" });
+  onMounted(() => {
+    mounted = true;
+    schedule();
+  });
+  onBeforeUnmount(() => {
+    mounted = false;
+    clear();
+  });
+  return schedule;
+}

package/src/agents/streaming-response/index.ts

@@ -0,0 +1,7 @@
+export { default as StreamingResponse } from "./src/StreamingResponse.vue";
+export type {
+  StreamingResponseStatus,
+  StreamingResponseFeedback,
+} from "./src/StreamingResponse.vue";
+
+export type * from "./src/api-types";

package/src/agents/streaming-response/src/ResponseAction.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+const props = withDefaults(defineProps<{ label: string; active?: boolean }>(), {
+  active: false,
+});
+const reduced = useReducedMotion();
+const pressed = computed(() =>
+  ["Helpful", "Not helpful"].includes(props.label) ? props.active : undefined,
+);
+</script>
+<template>
+  <motion.button
+    type="button"
+    :aria-label="label"
+    :title="label"
+    :aria-pressed="pressed"
+    :while-press="reduced ? undefined : { scale: 0.9 }"
+    :transition="SPRING_PRESS"
+    :class="
+      cn(
+        'grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring',
+        active && 'bg-muted text-foreground',
+      )
+    "
+    ><slot
+  /></motion.button>
+</template>

package/src/agents/streaming-response/src/StreamingResponse.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, useId } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import {
+  Check,
+  ChevronDown,
+  Copy,
+  RotateCcw,
+  ThumbsDown,
+  ThumbsUp,
+} from "lucide-vue-next";
+import { EASE_OUT, SPRING_SWAP } from "../../../lib/ease";
+import { cn } from "../../../lib/utils";
+import { useReducedMotion } from "../../../lib/composables";
+import { CitationList, CitationStack, type CitationItem } from "../../citations";
+import { useClipboard, useControllable } from "../../shared";
+import AgentDisclosure from "../../AgentDisclosure.vue";
+import ResponseAction from "./ResponseAction.vue";
+export type StreamingResponseStatus = "streaming" | "complete" | "error";
+export type StreamingResponseFeedback = "up" | "down" | null;
+const props = withDefaults(
+  defineProps<{
+    status?: StreamingResponseStatus;
+    copyText?: string;
+    onCopy?: () => void | Promise<void>;
+    sources?: CitationItem[];
+    sourcesOpen?: boolean;
+    defaultSourcesOpen?: boolean;
+    sourceIdPrefix?: string;
+    feedback?: StreamingResponseFeedback;
+    defaultFeedback?: StreamingResponseFeedback;
+    announce?: boolean;
+    showActions?: boolean;
+    contentClassName?: string;
+    actionsClassName?: string;
+  }>(),
+  {
+    status: "streaming",
+    sources: () => [],
+    sourcesOpen: undefined,
+    defaultSourcesOpen: false,
+    defaultFeedback: null,
+    announce: true,
+    showActions: true,
+  },
+);
+const emit = defineEmits<{
+  retry: [];
+  "update:sourcesOpen": [open: boolean];
+  sourcesOpenChange: [open: boolean];
+  "update:feedback": [feedback: StreamingResponseFeedback];
+  feedbackChange: [feedback: StreamingResponseFeedback];
+}>();
+const feedbackValue = useControllable(
+  () => props.feedback,
+  props.defaultFeedback,
+  (value) => {
+    emit("update:feedback", value);
+    emit("feedbackChange", value);
+  },
+);
+const expanded = useControllable(
+  () => props.sourcesOpen,
+  props.defaultSourcesOpen,
+  (value) => {
+    emit("update:sourcesOpen", value);
+    emit("sourcesOpenChange", value);
+  },
+);
+const { copy, copied } = useClipboard(
+  () => props.copyText ?? "",
+  () =>
+    props.onCopy
+      ? props.onCopy()
+      : navigator.clipboard.writeText(props.copyText ?? ""),
+);
+const reduced = useReducedMotion();
+const identity = useId();
+const instance = getCurrentInstance();
+const hasRetry = () => !!instance?.vnode.props?.onRetry;
+const visible = computed(
+  () =>
+    props.showActions &&
+    props.status !== "streaming" &&
+    !!(
+      props.copyText ||
+      props.onCopy ||
+      hasRetry() ||
+      props.status === "complete" ||
+      props.sources.length
+    ),
+);
+function toggleFeedback(value: "up" | "down") {
+  feedbackValue.value = feedbackValue.value === value ? null : value;
+}
+</script>
+<template>
+  <div :data-state="status" :aria-busy="status === 'streaming'" class="w-full">
+    <div
+      :aria-live="announce ? 'polite' : 'off'"
+      :class="
+        cn(
+          'text-sm leading-6 text-foreground/90 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:space-y-1 [&_ol]:pl-5 [&_p+p]:mt-3 [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/45 [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5',
+          contentClassName,
+        )
+      "
+    >
+      <slot />
+    </div>
+    <AnimatePresence :initial="false"
+      ><motion.div
+        v-if="visible"
+        class="mt-3"
+        :initial="reduced ? { opacity: 0 } : { opacity: 0, y: 4 }"
+        :animate="{ opacity: 1, y: 0 }"
+        :exit="{ opacity: 0 }"
+        :transition="{ duration: reduced ? 0.12 : 0.22, ease: EASE_OUT }"
+      >
+        <div :class="cn('flex items-center gap-0.5', actionsClassName)">
+          <ResponseAction
+            v-if="copyText || onCopy"
+            :label="copied ? 'Copied' : 'Copy response'"
+            @click="copy"
+            ><Check v-if="copied" class="size-3.5" /><Copy
+              v-else
+              class="size-3.5"
+          /></ResponseAction>
+          <ResponseAction
+            v-if="hasRetry()"
+            label="Retry response"
+            @click="emit('retry')"
+            ><RotateCcw class="size-3.5"
+          /></ResponseAction>
+          <template v-if="status === 'complete'"
+            ><ResponseAction
+              label="Helpful"
+              :active="feedbackValue === 'up'"
+              @click="toggleFeedback('up')"
+              ><ThumbsUp class="size-3.5" /></ResponseAction
+            ><ResponseAction
+              label="Not helpful"
+              :active="feedbackValue === 'down'"
+              @click="toggleFeedback('down')"
+              ><ThumbsDown class="size-3.5" /></ResponseAction
+          ></template>
+          <button
+            v-if="sources.length"
+            type="button"
+            :aria-expanded="expanded"
+            :aria-controls="`${identity}-sources`"
+            @click="expanded = !expanded"
+            class="group ml-1 inline-flex min-h-7 items-center gap-2 rounded-md px-1.5 text-xs text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <CitationStack :citations="sources" /><span class="tabular-nums"
+              >{{ sources.length }}
+              {{ sources.length === 1 ? "source" : "sources" }}</span
+            >
+            <motion.span
+              aria-hidden="true"
+              class="text-muted-foreground/70 group-hover:text-muted-foreground"
+              :animate="{ rotate: expanded ? 180 : 0 }"
+              :transition="reduced ? { duration: 0 } : SPRING_SWAP"
+              ><ChevronDown class="size-3"
+            /></motion.span>
+          </button>
+        </div>
+        <AgentDisclosure
+          v-if="sources.length"
+          :id="`${identity}-sources`"
+          :open="expanded"
+          ><CitationList
+            :citations="sources"
+            :id-prefix="
+              sourceIdPrefix ?? `response-source-${identity.replace(/:/g, '')}`
+            "
+            class="mt-2 rounded-xl bg-muted p-2"
+        /></AgentDisclosure> </motion.div
+    ></AnimatePresence>
+  </div>
+</template>

package/src/agents/streaming-response/src/api-types.ts

@@ -0,0 +1,4 @@
+// Vue public prop types, derived from the actual components.
+export type StreamingResponseProps = InstanceType<
+  (typeof import("./StreamingResponse.vue"))["default"]
+>["$props"];

package/src/agents/todo-list/index.ts

@@ -0,0 +1,4 @@
+export { default as TodoList } from "./src/TodoList.vue";
+export type { TodoItemStatus, TodoItem } from "./src/TodoList.vue";
+
+export type * from "./src/api-types";

package/src/agents/todo-list/src/TodoHeaderIcon.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { AnimatePresence, motion } from "motion-v";
+import { ListTodo } from "lucide-vue-next";
+import { EASE_OUT, SPRING_SWAP } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+defineProps<{ complete: boolean }>();
+const reduced = useReducedMotion();
+// Own normalized three-point mark; the path renderer retains the draw animation.
+const check = [
+  [7.8, 12],
+  [10.7, 15],
+  [16.4, 9.3],
+]
+  .map(([x, y], index) => `${index ? "L" : "M"}${x} ${y}`)
+  .join("");
+</script>
+<template>
+  <span
+    aria-hidden="true"
+    class="relative grid size-6 shrink-0 place-items-center"
+    ><AnimatePresence :initial="false" mode="popLayout">
+      <motion.svg
+        v-if="complete"
+        key="complete"
+        viewBox="0 0 24 24"
+        class="absolute size-5.5 overflow-visible text-emerald-500"
+        :initial="reduced ? { opacity: 1 } : { opacity: 0, scale: 0.72 }"
+        :animate="{ opacity: 1, scale: 1 }"
+        :exit="{ opacity: 0 }"
+        :transition="reduced ? { duration: 0 } : SPRING_SWAP"
+      >
+        <circle cx="12" cy="12" r="9" fill="currentColor" /><motion.path
+          :d="check"
+          fill="none"
+          stroke="white"
+          :stroke-width="2.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          :initial="{ pathLength: reduced ? 1 : 0 }"
+          :animate="{ pathLength: 1 }"
+          :transition="
+            reduced ? { duration: 0 } : { duration: 0.24, ease: EASE_OUT }
+          "
+        />
+      </motion.svg>
+      <motion.span
+        v-else
+        key="todo"
+        class="absolute grid place-items-center text-muted-foreground"
+        :initial="reduced ? { opacity: 1 } : { opacity: 0, scale: 0.8 }"
+        :animate="{ opacity: 1, scale: 1 }"
+        :exit="reduced ? { opacity: 0 } : { opacity: 0, scale: 0.72 }"
+        :transition="reduced ? { duration: 0 } : SPRING_SWAP"
+        ><ListTodo class="size-4"
+      /></motion.span> </AnimatePresence
+  ></span>
+</template>