Redesign writing assistant UI: right-side panel, diff view, proofread, floating inline assist
- sectionParser.ts: add parseFallbackSections() — splits heading-less notes by paragraph boundaries; single-line ≤120 char paragraphs become pseudo-headings so Q&A-style notes get individual selectable sections in the assist panel - useAssist.ts: add DiffLine type + computeDiff() (LCS line diff), isProofreading ref, diff computed, proofread() method (full-document one-click), reset isProofreading in accept() and reject() - NoteEditorView + TaskEditorView: complete layout redesign - Assist panel moves from bottom 33% to right-side 320px column (flex-row) - ✨ Assist toggle button in toolbar, state persisted to localStorage - Floating ✨ pill button (teleported to <body>) above text selections; click opens panel with selection pre-loaded and instruction textarea focused - Proofread button in panel header: sends entire document, labels streaming as "Proofreading document..." and review as "Document proofread" - Review state shows LCS line-level diff (red removed, green added); "Show full text" toggle switches to rendered proposal - Mobile (≤768px): panel drops to bottom 45% height - theme.css: add global .inline-assist-btn styles for teleported floating button - Site-wide max-width increase: list/chat/settings views 960px→1200px; viewer layout 1200px→1400px (content area 960px→1100px); editor pages already at 1400px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -128,3 +128,22 @@ button:focus-visible {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating inline assist button (teleported to body, cannot be scoped) */
|
||||
.inline-assist-btn {
|
||||
position: fixed;
|
||||
z-index: 150;
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px var(--color-shadow);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.inline-assist-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
@@ -14,6 +14,33 @@ export interface AssistTarget {
|
||||
endOffset: number;
|
||||
}
|
||||
|
||||
export interface DiffLine {
|
||||
type: 'equal' | 'delete' | 'insert';
|
||||
text: string;
|
||||
}
|
||||
|
||||
function computeDiff(a: string, b: string): DiffLine[] {
|
||||
const aLines = a.split('\n');
|
||||
const bLines = b.split('\n');
|
||||
const m = aLines.length, n = bLines.length;
|
||||
const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
|
||||
for (let i = m - 1; i >= 0; i--)
|
||||
for (let j = n - 1; j >= 0; j--)
|
||||
dp[i][j] = aLines[i] === bLines[j]
|
||||
? dp[i+1][j+1] + 1
|
||||
: Math.max(dp[i+1][j], dp[i][j+1]);
|
||||
const result: DiffLine[] = [];
|
||||
let i = 0, j = 0;
|
||||
while (i < m && j < n) {
|
||||
if (aLines[i] === bLines[j]) { result.push({ type: 'equal', text: aLines[i++] }); j++; }
|
||||
else if (dp[i+1][j] >= dp[i][j+1]) result.push({ type: 'delete', text: aLines[i++] });
|
||||
else result.push({ type: 'insert', text: bLines[j++] });
|
||||
}
|
||||
while (i < m) result.push({ type: 'delete', text: aLines[i++] });
|
||||
while (j < n) result.push({ type: 'insert', text: bLines[j++] });
|
||||
return result;
|
||||
}
|
||||
|
||||
export function useAssist(body: Ref<string>) {
|
||||
const chatStore = useChatStore();
|
||||
|
||||
@@ -25,6 +52,7 @@ export function useAssist(body: Ref<string>) {
|
||||
const streamingText = ref("");
|
||||
const proposedText = ref("");
|
||||
const error = ref("");
|
||||
const isProofreading = ref(false);
|
||||
|
||||
// Snapshot of body at the time a section/selection was chosen
|
||||
let bodySnapshot = "";
|
||||
@@ -56,6 +84,11 @@ export function useAssist(body: Ref<string>) {
|
||||
state.value !== "streaming"
|
||||
);
|
||||
|
||||
const diff = computed<DiffLine[]>(() => {
|
||||
if (state.value !== 'review' || !target.value || !proposedText.value) return [];
|
||||
return computeDiff(target.value.text, proposedText.value);
|
||||
});
|
||||
|
||||
function refreshSections() {
|
||||
sections.value = parseMarkdownSections(body.value);
|
||||
}
|
||||
@@ -145,6 +178,20 @@ export function useAssist(body: Ref<string>) {
|
||||
}
|
||||
}
|
||||
|
||||
async function proofread() {
|
||||
if (state.value === 'streaming') return;
|
||||
isProofreading.value = true;
|
||||
selectedSection.value = null;
|
||||
customSelection.value = { start: 0, end: body.value.length, text: body.value };
|
||||
bodySnapshot = body.value;
|
||||
error.value = '';
|
||||
instruction.value =
|
||||
"Proofread for clarity, grammar, spelling, and flow. " +
|
||||
"Preserve the author's voice and all factual content. " +
|
||||
"Return only the improved text without explanation.";
|
||||
await submit();
|
||||
}
|
||||
|
||||
function accept(): string {
|
||||
if (!target.value || !proposedText.value) return body.value;
|
||||
|
||||
@@ -177,6 +224,7 @@ export function useAssist(body: Ref<string>) {
|
||||
proposedText.value = "";
|
||||
error.value = "";
|
||||
state.value = "idle";
|
||||
isProofreading.value = false;
|
||||
|
||||
return newBody;
|
||||
}
|
||||
@@ -186,6 +234,7 @@ export function useAssist(body: Ref<string>) {
|
||||
streamingText.value = "";
|
||||
error.value = "";
|
||||
state.value = "idle";
|
||||
isProofreading.value = false;
|
||||
// Keep selection + instruction for retry
|
||||
}
|
||||
|
||||
@@ -205,11 +254,14 @@ export function useAssist(body: Ref<string>) {
|
||||
proposedText,
|
||||
error,
|
||||
canSubmit,
|
||||
diff,
|
||||
isProofreading,
|
||||
refreshSections,
|
||||
selectSection,
|
||||
selectTextRange,
|
||||
clearSelection,
|
||||
submit,
|
||||
proofread,
|
||||
accept,
|
||||
reject,
|
||||
};
|
||||
|
||||
@@ -8,6 +8,73 @@ export interface MarkdownSection {
|
||||
|
||||
const HEADING_RE = /^(#{1,6})\s+(.*)$/gm;
|
||||
|
||||
function parseFallbackSections(body: string): MarkdownSection[] {
|
||||
if (!body.trim())
|
||||
return [];
|
||||
|
||||
const isPseudoHeading = (text: string): boolean => {
|
||||
const t = text.trim();
|
||||
return (
|
||||
t.length > 0 && t.length <= 120 &&
|
||||
!t.includes('\n') &&
|
||||
!/^[-*+>]/.test(t) &&
|
||||
!/^\d+\./.test(t) &&
|
||||
!/^`{3,}/.test(t)
|
||||
);
|
||||
};
|
||||
|
||||
// Build paragraph list with exact start/end offsets
|
||||
const separatorRe = /\n{2,}/g;
|
||||
const paragraphs: Array<{ text: string; start: number; end: number }> = [];
|
||||
let lastEnd = 0;
|
||||
let sep: RegExpExecArray | null;
|
||||
while ((sep = separatorRe.exec(body)) !== null) {
|
||||
if (sep.index > lastEnd)
|
||||
paragraphs.push({ text: body.slice(lastEnd, sep.index), start: lastEnd, end: sep.index });
|
||||
lastEnd = sep.index + sep[0].length;
|
||||
}
|
||||
if (lastEnd < body.length)
|
||||
paragraphs.push({ text: body.slice(lastEnd), start: lastEnd, end: body.length });
|
||||
|
||||
if (paragraphs.length === 0)
|
||||
return [{ heading: '', level: 0, content: body, startOffset: 0, endOffset: body.length }];
|
||||
|
||||
const headingIndices = new Set(
|
||||
paragraphs.map((p, i) => isPseudoHeading(p.text) ? i : -1).filter(i => i >= 0)
|
||||
);
|
||||
if (headingIndices.size === 0)
|
||||
return [{ heading: '', level: 0, content: body, startOffset: 0, endOffset: body.length }];
|
||||
|
||||
const sections: MarkdownSection[] = [];
|
||||
const headingIdxArray = [...headingIndices].sort((a, b) => a - b);
|
||||
const firstHi = headingIdxArray[0];
|
||||
|
||||
// Preamble (content before first pseudo-heading)
|
||||
if (firstHi > 0) {
|
||||
sections.push({
|
||||
heading: '', level: 0,
|
||||
content: body.slice(paragraphs[0].start, paragraphs[firstHi].start),
|
||||
startOffset: paragraphs[0].start,
|
||||
endOffset: paragraphs[firstHi].start,
|
||||
});
|
||||
}
|
||||
|
||||
// One section per pseudo-heading
|
||||
for (let h = 0; h < headingIdxArray.length; h++) {
|
||||
const hi = headingIdxArray[h];
|
||||
const nextHi = h + 1 < headingIdxArray.length ? headingIdxArray[h + 1] : null;
|
||||
const sectionEnd = nextHi !== null ? paragraphs[nextHi].start : body.length;
|
||||
sections.push({
|
||||
heading: paragraphs[hi].text.trim(),
|
||||
level: 0,
|
||||
content: body.slice(paragraphs[hi].start, sectionEnd),
|
||||
startOffset: paragraphs[hi].start,
|
||||
endOffset: sectionEnd,
|
||||
});
|
||||
}
|
||||
return sections;
|
||||
}
|
||||
|
||||
export function parseMarkdownSections(body: string): MarkdownSection[] {
|
||||
const sections: MarkdownSection[] = [];
|
||||
const matches: { index: number; level: number; heading: string }[] = [];
|
||||
@@ -23,17 +90,7 @@ export function parseMarkdownSections(body: string): MarkdownSection[] {
|
||||
|
||||
// Preamble: text before the first heading
|
||||
if (matches.length === 0) {
|
||||
// Entire body is a single preamble section
|
||||
if (body.length > 0) {
|
||||
sections.push({
|
||||
heading: "",
|
||||
level: 0,
|
||||
content: body,
|
||||
startOffset: 0,
|
||||
endOffset: body.length,
|
||||
});
|
||||
}
|
||||
return sections;
|
||||
return parseFallbackSections(body);
|
||||
}
|
||||
|
||||
if (matches[0].index > 0) {
|
||||
|
||||
@@ -676,7 +676,7 @@ onUnmounted(() => {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -821,7 +821,7 @@ onUnmounted(() => {
|
||||
|
||||
/* Input wrapper */
|
||||
.input-wrapper {
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 2rem;
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
|
||||
@@ -424,7 +424,7 @@ function clearDashboardResponse() {
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -252,7 +252,7 @@ function clearFilters() {
|
||||
|
||||
<style scoped>
|
||||
.logs-page {
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
|
||||
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
@@ -38,10 +38,45 @@ const assist = useAssist(body);
|
||||
const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
|
||||
const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
|
||||
|
||||
function onSelectionChange(payload: { text: string; start: number; end: number }) {
|
||||
assist.selectTextRange(payload.start, payload.end);
|
||||
// Assist panel toggle (persisted)
|
||||
const ASSIST_KEY = 'fa-assist-open';
|
||||
const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
|
||||
function toggleAssist() {
|
||||
assistOpen.value = !assistOpen.value;
|
||||
localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
|
||||
}
|
||||
|
||||
// Floating inline assist button
|
||||
const floatingAssist = ref({ show: false, top: 0, left: 0 });
|
||||
const pendingSelection = ref<{ start: number; end: number } | null>(null);
|
||||
const instructionRef = ref<HTMLTextAreaElement | null>(null);
|
||||
|
||||
function onSelectionChange(payload: { text: string; start: number; end: number }) {
|
||||
if (payload.text.trim().length > 0) {
|
||||
const sel = window.getSelection();
|
||||
if (sel && sel.rangeCount > 0) {
|
||||
const rect = sel.getRangeAt(0).getBoundingClientRect();
|
||||
floatingAssist.value = { show: true, top: rect.top - 44, left: rect.left + rect.width / 2 };
|
||||
pendingSelection.value = { start: payload.start, end: payload.end };
|
||||
}
|
||||
} else {
|
||||
floatingAssist.value.show = false;
|
||||
pendingSelection.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function handleInlineAssist() {
|
||||
if (!pendingSelection.value) return;
|
||||
assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
|
||||
assistOpen.value = true;
|
||||
localStorage.setItem(ASSIST_KEY, 'true');
|
||||
floatingAssist.value.show = false;
|
||||
nextTick(() => instructionRef.value?.focus());
|
||||
}
|
||||
|
||||
// Diff view toggle
|
||||
const showFullProposed = ref(false);
|
||||
|
||||
function handleAssistAccept() {
|
||||
const newBody = assist.accept();
|
||||
if (newBody !== body.value) {
|
||||
@@ -49,6 +84,7 @@ function handleAssistAccept() {
|
||||
markDirty();
|
||||
toast.show("Section updated");
|
||||
}
|
||||
showFullProposed.value = false;
|
||||
}
|
||||
|
||||
function truncateTarget(text: string, max = 60): string {
|
||||
@@ -195,7 +231,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="editor-layout">
|
||||
<main class="editor-page">
|
||||
<div class="editor-header">
|
||||
<div class="toolbar">
|
||||
<router-link to="/notes" class="btn-back">Back</router-link>
|
||||
@@ -205,6 +241,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
<button v-if="isEditing" class="btn-delete" @click="remove">
|
||||
Delete
|
||||
</button>
|
||||
<button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
|
||||
✨ Assist
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
v-model="title"
|
||||
@@ -251,87 +290,137 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
|
||||
</div>
|
||||
|
||||
<div class="editor-scroll">
|
||||
<div v-show="!showPreview">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
placeholder="Write your note in Markdown... Use #tags inline"
|
||||
:fetchTags="(q: string) => store.fetchAllTags(q)"
|
||||
@update:modelValue="onBodyUpdate"
|
||||
@selectionChange="onSelectionChange"
|
||||
/>
|
||||
<div class="editor-body">
|
||||
<div class="editor-main">
|
||||
<div v-show="!showPreview">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
placeholder="Write your note in Markdown... Use #tags inline"
|
||||
:fetchTags="(q: string) => store.fetchAllTags(q)"
|
||||
@update:modelValue="onBodyUpdate"
|
||||
@selectionChange="onSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="showPreview"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="showPreview"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
></div>
|
||||
<aside v-if="assistOpen" class="assist-panel">
|
||||
<!-- Panel header -->
|
||||
<div class="assist-panel-header">
|
||||
<span class="assist-panel-title">✨ AI Assist</span>
|
||||
<button
|
||||
class="btn-proofread"
|
||||
@click="assist.proofread()"
|
||||
:disabled="assist.state.value === 'streaming'"
|
||||
>Proofread</button>
|
||||
<button class="btn-close-assist" @click="toggleAssist">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Panel body -->
|
||||
<div class="assist-panel-body">
|
||||
|
||||
<!-- IDLE -->
|
||||
<div v-if="assist.state.value === 'idle'" class="assist-idle">
|
||||
<div class="assist-sections-label">Sections</div>
|
||||
<div class="assist-sections">
|
||||
<div
|
||||
v-for="(section, i) in assist.sections.value"
|
||||
:key="i"
|
||||
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
|
||||
@click="assist.selectSection(section)"
|
||||
>
|
||||
{{ section.heading || '(preamble)' }}
|
||||
</div>
|
||||
<div v-if="!assist.sections.value.length" class="assist-empty">
|
||||
Write some content to get started.
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="assist.target.value">
|
||||
<div class="assist-target-preview">
|
||||
Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
|
||||
</div>
|
||||
<textarea
|
||||
ref="instructionRef"
|
||||
v-model="assist.instruction.value"
|
||||
placeholder="What should I do with this section?"
|
||||
class="assist-instruction"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="assist-input-actions">
|
||||
<button
|
||||
class="btn-generate"
|
||||
@click="assist.submit()"
|
||||
:disabled="!assist.canSubmit.value"
|
||||
>Generate</button>
|
||||
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="assist-hint">
|
||||
Select a section above or highlight text in the editor.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ERROR -->
|
||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||
|
||||
<!-- STREAMING -->
|
||||
<div v-if="assist.state.value === 'streaming'" class="assist-streaming">
|
||||
<div class="assist-streaming-label">
|
||||
{{ assist.isProofreading.value
|
||||
? 'Proofreading document...'
|
||||
: `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
|
||||
</div>
|
||||
<div class="assist-preview-box prose" v-html="renderedStreaming"></div>
|
||||
<span class="typing-indicator">●●●</span>
|
||||
</div>
|
||||
|
||||
<!-- REVIEW -->
|
||||
<div v-if="assist.state.value === 'review'" class="assist-review">
|
||||
<div class="assist-review-header">
|
||||
<span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
|
||||
<button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
|
||||
{{ showFullProposed ? 'Show diff' : 'Show full text' }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!showFullProposed" class="diff-view">
|
||||
<div
|
||||
v-for="(line, i) in assist.diff.value"
|
||||
:key="i"
|
||||
:class="['diff-line', `diff-${line.type}`]"
|
||||
>
|
||||
<span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
|
||||
<span class="diff-text">{{ line.text }}</span>
|
||||
</div>
|
||||
<div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
|
||||
</div>
|
||||
<div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
|
||||
<div class="assist-actions">
|
||||
<button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
|
||||
<button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- AI Assist -->
|
||||
<aside class="assist-panel">
|
||||
<div class="assist-panel-header">
|
||||
<h3 class="assist-panel-title">AI Assist</h3>
|
||||
</div>
|
||||
|
||||
<div class="assist-panel-body">
|
||||
<div v-if="assist.state.value === 'idle'" class="assist-controls">
|
||||
<div class="assist-sections">
|
||||
<div
|
||||
v-for="(section, i) in assist.sections.value"
|
||||
:key="i"
|
||||
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
|
||||
@click="assist.selectSection(section)"
|
||||
>
|
||||
{{ section.heading || '(preamble)' }}
|
||||
</div>
|
||||
<div v-if="assist.sections.value.length === 0" class="assist-empty">
|
||||
No sections found. Add headings (## ...) or select text.
|
||||
</div>
|
||||
</div>
|
||||
<div class="assist-input" v-if="assist.target.value">
|
||||
<div class="assist-target-preview">
|
||||
Editing: {{ truncateTarget(assist.target.value.text) }}
|
||||
</div>
|
||||
<textarea
|
||||
v-model="assist.instruction.value"
|
||||
placeholder="What should I do with this section?"
|
||||
class="assist-instruction"
|
||||
rows="2"
|
||||
></textarea>
|
||||
<div class="assist-input-actions">
|
||||
<button
|
||||
class="btn-generate"
|
||||
@click="assist.submit()"
|
||||
:disabled="!assist.canSubmit.value"
|
||||
>
|
||||
Generate
|
||||
</button>
|
||||
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="assist.error.value" class="assist-error">
|
||||
{{ assist.error.value }}
|
||||
</div>
|
||||
|
||||
<div v-if="assist.state.value === 'streaming'" class="assist-preview">
|
||||
<div class="assist-proposed prose" v-html="renderedStreaming"></div>
|
||||
<span class="typing-indicator">...</span>
|
||||
</div>
|
||||
|
||||
<div v-if="assist.state.value === 'review'" class="assist-review">
|
||||
<div class="assist-proposed prose" v-html="renderedProposal"></div>
|
||||
<div class="assist-actions">
|
||||
<button class="btn-accept" @click="handleAssistAccept">Accept</button>
|
||||
<button class="btn-reject" @click="assist.reject()">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Floating inline assist button (teleported to body) -->
|
||||
<teleport to="body">
|
||||
<button
|
||||
v-if="floatingAssist.show"
|
||||
class="inline-assist-btn"
|
||||
:style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
|
||||
@mousedown.prevent="handleInlineAssist"
|
||||
>
|
||||
✨ Assist
|
||||
</button>
|
||||
</teleport>
|
||||
|
||||
<!-- Delete confirmation -->
|
||||
<teleport to="body">
|
||||
@@ -351,10 +440,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
<style scoped>
|
||||
/* ── Layout ── */
|
||||
.editor-layout {
|
||||
max-width: 960px;
|
||||
.editor-page {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -365,13 +453,20 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 0 0.5rem;
|
||||
padding: 1rem 1.5rem 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.editor-scroll {
|
||||
flex: 1 1 0;
|
||||
.editor-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0 1rem;
|
||||
padding: 0.75rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
/* ── Toolbar & inputs ── */
|
||||
@@ -403,7 +498,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-assist-toggle {
|
||||
margin-left: auto;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.btn-assist-toggle.active {
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.title-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
@@ -505,53 +614,87 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
/* ── Assist panel ── */
|
||||
.assist-panel {
|
||||
flex: 0 0 33.33%;
|
||||
min-height: 0;
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--color-border);
|
||||
background: var(--color-bg-secondary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid var(--color-border);
|
||||
box-shadow: 0 -4px 16px var(--color-shadow);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.assist-panel-header {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.65rem 0.9rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.assist-panel-title {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.btn-proofread {
|
||||
padding: 0.3rem 0.65rem;
|
||||
font-size: 0.78rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-proofread:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.btn-proofread:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
.btn-close-assist {
|
||||
padding: 0.1rem 0.4rem;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.assist-panel-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
padding: 0.75rem 0.9rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.assist-controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
/* Section list */
|
||||
.assist-sections-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.assist-sections {
|
||||
flex: 0 0 40%;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.assist-section-item {
|
||||
padding: 0.35rem 0.75rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.82rem;
|
||||
border-left: 3px solid transparent;
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
@@ -566,38 +709,35 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
background: var(--color-bg-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.assist-empty {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.assist-input {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
.assist-empty,
|
||||
.assist-hint {
|
||||
padding: 0.6rem 0.7rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.assist-target-preview {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.assist-target-preview em {
|
||||
font-style: normal;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.assist-instruction {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.88rem;
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
resize: vertical;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
box-sizing: border-box;
|
||||
min-height: 3.5rem;
|
||||
}
|
||||
.assist-input-actions {
|
||||
display: flex;
|
||||
@@ -625,8 +765,37 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Streaming */
|
||||
.assist-streaming-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-style: italic;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.assist-preview-box {
|
||||
padding: 0.65rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
font-size: 0.9rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.typing-indicator {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.assist-error {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
||||
border: 1px solid var(--color-danger);
|
||||
@@ -634,29 +803,72 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.assist-preview,
|
||||
.assist-review {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
|
||||
/* Review / diff */
|
||||
.assist-review-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.btn-toggle-view {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-primary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.diff-view {
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
font-size: 0.82rem;
|
||||
font-family: monospace;
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
.assist-proposed {
|
||||
font-size: 0.95rem;
|
||||
.diff-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: 0.05rem 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.typing-indicator {
|
||||
display: inline-block;
|
||||
color: var(--color-text-secondary);
|
||||
animation: blink 1s step-end infinite;
|
||||
.diff-delete {
|
||||
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
.diff-insert {
|
||||
background: color-mix(in srgb, var(--color-success) 12%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
.diff-equal {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.diff-marker {
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.diff-text {
|
||||
flex: 1;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.diff-empty {
|
||||
padding: 0.5rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.assist-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.btn-accept {
|
||||
padding: 0.4rem 1rem;
|
||||
@@ -726,14 +938,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 768px) {
|
||||
.assist-panel {
|
||||
flex-basis: 45%;
|
||||
}
|
||||
.assist-controls {
|
||||
.editor-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
.assist-sections {
|
||||
flex: none;
|
||||
.assist-panel {
|
||||
width: auto;
|
||||
flex: 0 0 45%;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
.editor-header {
|
||||
padding: 0.75rem 1rem 0.5rem;
|
||||
}
|
||||
.editor-main {
|
||||
padding: 0.5rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -171,14 +171,14 @@ async function convertToTask() {
|
||||
<style scoped>
|
||||
.viewer-layout {
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
}
|
||||
.viewer {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 960px;
|
||||
max-width: 1100px;
|
||||
margin: 2rem 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -133,7 +133,7 @@ function onOffsetUpdate(offset: number) {
|
||||
|
||||
<style scoped>
|
||||
.notes-list {
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -595,7 +595,7 @@ async function handleRestoreFile(event: Event) {
|
||||
|
||||
<style scoped>
|
||||
.settings-page {
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
|
||||
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
|
||||
import { useTasksStore } from "@/stores/tasks";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
@@ -44,10 +44,45 @@ const assist = useAssist(body);
|
||||
const renderedStreaming = computed(() => renderMarkdown(assist.streamingText.value));
|
||||
const renderedProposal = computed(() => renderMarkdown(assist.proposedText.value));
|
||||
|
||||
function onSelectionChange(payload: { text: string; start: number; end: number }) {
|
||||
assist.selectTextRange(payload.start, payload.end);
|
||||
// Assist panel toggle (persisted)
|
||||
const ASSIST_KEY = 'fa-assist-open';
|
||||
const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
|
||||
function toggleAssist() {
|
||||
assistOpen.value = !assistOpen.value;
|
||||
localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
|
||||
}
|
||||
|
||||
// Floating inline assist button
|
||||
const floatingAssist = ref({ show: false, top: 0, left: 0 });
|
||||
const pendingSelection = ref<{ start: number; end: number } | null>(null);
|
||||
const instructionRef = ref<HTMLTextAreaElement | null>(null);
|
||||
|
||||
function onSelectionChange(payload: { text: string; start: number; end: number }) {
|
||||
if (payload.text.trim().length > 0) {
|
||||
const sel = window.getSelection();
|
||||
if (sel && sel.rangeCount > 0) {
|
||||
const rect = sel.getRangeAt(0).getBoundingClientRect();
|
||||
floatingAssist.value = { show: true, top: rect.top - 44, left: rect.left + rect.width / 2 };
|
||||
pendingSelection.value = { start: payload.start, end: payload.end };
|
||||
}
|
||||
} else {
|
||||
floatingAssist.value.show = false;
|
||||
pendingSelection.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function handleInlineAssist() {
|
||||
if (!pendingSelection.value) return;
|
||||
assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
|
||||
assistOpen.value = true;
|
||||
localStorage.setItem(ASSIST_KEY, 'true');
|
||||
floatingAssist.value.show = false;
|
||||
nextTick(() => instructionRef.value?.focus());
|
||||
}
|
||||
|
||||
// Diff view toggle
|
||||
const showFullProposed = ref(false);
|
||||
|
||||
function handleAssistAccept() {
|
||||
const newBody = assist.accept();
|
||||
if (newBody !== body.value) {
|
||||
@@ -55,6 +90,7 @@ function handleAssistAccept() {
|
||||
markDirty();
|
||||
toast.show("Section updated");
|
||||
}
|
||||
showFullProposed.value = false;
|
||||
}
|
||||
|
||||
function truncateTarget(text: string, max = 60): string {
|
||||
@@ -215,7 +251,7 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="editor-layout">
|
||||
<main class="editor-page">
|
||||
<div class="editor-header">
|
||||
<div class="toolbar">
|
||||
<router-link to="/tasks" class="btn-back">Back</router-link>
|
||||
@@ -225,6 +261,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
<button v-if="isEditing" class="btn-delete" @click="remove">
|
||||
Delete
|
||||
</button>
|
||||
<button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
|
||||
✨ Assist
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
v-model="title"
|
||||
@@ -300,87 +339,137 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
|
||||
</div>
|
||||
|
||||
<div class="editor-scroll">
|
||||
<div v-show="!showPreview">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
placeholder="Describe this task... Use #tags inline"
|
||||
:fetchTags="(q: string) => notesStore.fetchAllTags(q)"
|
||||
@update:modelValue="onBodyUpdate"
|
||||
@selectionChange="onSelectionChange"
|
||||
/>
|
||||
<div class="editor-body">
|
||||
<div class="editor-main">
|
||||
<div v-show="!showPreview">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
placeholder="Describe this task... Use #tags inline"
|
||||
:fetchTags="(q: string) => notesStore.fetchAllTags(q)"
|
||||
@update:modelValue="onBodyUpdate"
|
||||
@selectionChange="onSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="showPreview"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="showPreview"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
></div>
|
||||
<aside v-if="assistOpen" class="assist-panel">
|
||||
<!-- Panel header -->
|
||||
<div class="assist-panel-header">
|
||||
<span class="assist-panel-title">✨ AI Assist</span>
|
||||
<button
|
||||
class="btn-proofread"
|
||||
@click="assist.proofread()"
|
||||
:disabled="assist.state.value === 'streaming'"
|
||||
>Proofread</button>
|
||||
<button class="btn-close-assist" @click="toggleAssist">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Panel body -->
|
||||
<div class="assist-panel-body">
|
||||
|
||||
<!-- IDLE -->
|
||||
<div v-if="assist.state.value === 'idle'" class="assist-idle">
|
||||
<div class="assist-sections-label">Sections</div>
|
||||
<div class="assist-sections">
|
||||
<div
|
||||
v-for="(section, i) in assist.sections.value"
|
||||
:key="i"
|
||||
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
|
||||
@click="assist.selectSection(section)"
|
||||
>
|
||||
{{ section.heading || '(preamble)' }}
|
||||
</div>
|
||||
<div v-if="!assist.sections.value.length" class="assist-empty">
|
||||
Write some content to get started.
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="assist.target.value">
|
||||
<div class="assist-target-preview">
|
||||
Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
|
||||
</div>
|
||||
<textarea
|
||||
ref="instructionRef"
|
||||
v-model="assist.instruction.value"
|
||||
placeholder="What should I do with this section?"
|
||||
class="assist-instruction"
|
||||
rows="3"
|
||||
></textarea>
|
||||
<div class="assist-input-actions">
|
||||
<button
|
||||
class="btn-generate"
|
||||
@click="assist.submit()"
|
||||
:disabled="!assist.canSubmit.value"
|
||||
>Generate</button>
|
||||
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="assist-hint">
|
||||
Select a section above or highlight text in the editor.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ERROR -->
|
||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||
|
||||
<!-- STREAMING -->
|
||||
<div v-if="assist.state.value === 'streaming'" class="assist-streaming">
|
||||
<div class="assist-streaming-label">
|
||||
{{ assist.isProofreading.value
|
||||
? 'Proofreading document...'
|
||||
: `Revising: "${truncateTarget(assist.target.value?.text ?? '')}"` }}
|
||||
</div>
|
||||
<div class="assist-preview-box prose" v-html="renderedStreaming"></div>
|
||||
<span class="typing-indicator">●●●</span>
|
||||
</div>
|
||||
|
||||
<!-- REVIEW -->
|
||||
<div v-if="assist.state.value === 'review'" class="assist-review">
|
||||
<div class="assist-review-header">
|
||||
<span>{{ assist.isProofreading.value ? 'Document proofread' : 'Proposed changes' }}</span>
|
||||
<button class="btn-toggle-view" @click="showFullProposed = !showFullProposed">
|
||||
{{ showFullProposed ? 'Show diff' : 'Show full text' }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!showFullProposed" class="diff-view">
|
||||
<div
|
||||
v-for="(line, i) in assist.diff.value"
|
||||
:key="i"
|
||||
:class="['diff-line', `diff-${line.type}`]"
|
||||
>
|
||||
<span class="diff-marker">{{ line.type === 'delete' ? '−' : line.type === 'insert' ? '+' : ' ' }}</span>
|
||||
<span class="diff-text">{{ line.text }}</span>
|
||||
</div>
|
||||
<div v-if="!assist.diff.value.length" class="diff-empty">No changes.</div>
|
||||
</div>
|
||||
<div v-else class="assist-preview-box prose" v-html="renderedProposal"></div>
|
||||
<div class="assist-actions">
|
||||
<button class="btn-accept" @click="handleAssistAccept">✓ Accept</button>
|
||||
<button class="btn-reject" @click="() => { assist.reject(); showFullProposed = false; }">✗ Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- AI Assist -->
|
||||
<aside class="assist-panel">
|
||||
<div class="assist-panel-header">
|
||||
<h3 class="assist-panel-title">AI Assist</h3>
|
||||
</div>
|
||||
|
||||
<div class="assist-panel-body">
|
||||
<div v-if="assist.state.value === 'idle'" class="assist-controls">
|
||||
<div class="assist-sections">
|
||||
<div
|
||||
v-for="(section, i) in assist.sections.value"
|
||||
:key="i"
|
||||
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
|
||||
@click="assist.selectSection(section)"
|
||||
>
|
||||
{{ section.heading || '(preamble)' }}
|
||||
</div>
|
||||
<div v-if="assist.sections.value.length === 0" class="assist-empty">
|
||||
No sections found. Add headings (## ...) or select text.
|
||||
</div>
|
||||
</div>
|
||||
<div class="assist-input" v-if="assist.target.value">
|
||||
<div class="assist-target-preview">
|
||||
Editing: {{ truncateTarget(assist.target.value.text) }}
|
||||
</div>
|
||||
<textarea
|
||||
v-model="assist.instruction.value"
|
||||
placeholder="What should I do with this section?"
|
||||
class="assist-instruction"
|
||||
rows="2"
|
||||
></textarea>
|
||||
<div class="assist-input-actions">
|
||||
<button
|
||||
class="btn-generate"
|
||||
@click="assist.submit()"
|
||||
:disabled="!assist.canSubmit.value"
|
||||
>
|
||||
Generate
|
||||
</button>
|
||||
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="assist.error.value" class="assist-error">
|
||||
{{ assist.error.value }}
|
||||
</div>
|
||||
|
||||
<div v-if="assist.state.value === 'streaming'" class="assist-preview">
|
||||
<div class="assist-proposed prose" v-html="renderedStreaming"></div>
|
||||
<span class="typing-indicator">...</span>
|
||||
</div>
|
||||
|
||||
<div v-if="assist.state.value === 'review'" class="assist-review">
|
||||
<div class="assist-proposed prose" v-html="renderedProposal"></div>
|
||||
<div class="assist-actions">
|
||||
<button class="btn-accept" @click="handleAssistAccept">Accept</button>
|
||||
<button class="btn-reject" @click="assist.reject()">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Floating inline assist button (teleported to body) -->
|
||||
<teleport to="body">
|
||||
<button
|
||||
v-if="floatingAssist.show"
|
||||
class="inline-assist-btn"
|
||||
:style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
|
||||
@mousedown.prevent="handleInlineAssist"
|
||||
>
|
||||
✨ Assist
|
||||
</button>
|
||||
</teleport>
|
||||
|
||||
<!-- Delete confirmation -->
|
||||
<teleport to="body">
|
||||
@@ -400,10 +489,9 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
<style scoped>
|
||||
/* ── Layout ── */
|
||||
.editor-layout {
|
||||
max-width: 960px;
|
||||
.editor-page {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -414,13 +502,20 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 0 0.5rem;
|
||||
padding: 1rem 1.5rem 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.editor-scroll {
|
||||
flex: 1 1 0;
|
||||
.editor-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0 1rem;
|
||||
padding: 0.75rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
/* ── Toolbar & inputs ── */
|
||||
@@ -452,7 +547,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-assist-toggle {
|
||||
margin-left: auto;
|
||||
padding: 0.4rem 0.9rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.btn-assist-toggle.active {
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.title-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
@@ -580,53 +689,87 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
/* ── Assist panel ── */
|
||||
.assist-panel {
|
||||
flex: 0 0 33.33%;
|
||||
min-height: 0;
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--color-border);
|
||||
background: var(--color-bg-secondary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid var(--color-border);
|
||||
box-shadow: 0 -4px 16px var(--color-shadow);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.assist-panel-header {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem 1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.65rem 0.9rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.assist-panel-title {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.btn-proofread {
|
||||
padding: 0.3rem 0.65rem;
|
||||
font-size: 0.78rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-proofread:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.btn-proofread:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
.btn-close-assist {
|
||||
padding: 0.1rem 0.4rem;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.assist-panel-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
padding: 0.75rem 0.9rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.assist-controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
/* Section list */
|
||||
.assist-sections-label {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.assist-sections {
|
||||
flex: 0 0 40%;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.assist-section-item {
|
||||
padding: 0.35rem 0.75rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.82rem;
|
||||
border-left: 3px solid transparent;
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
@@ -641,38 +784,35 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
background: var(--color-bg-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.assist-empty {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.assist-input {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
.assist-empty,
|
||||
.assist-hint {
|
||||
padding: 0.6rem 0.7rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.assist-target-preview {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.assist-target-preview em {
|
||||
font-style: normal;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.assist-instruction {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.88rem;
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
resize: vertical;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
box-sizing: border-box;
|
||||
min-height: 3.5rem;
|
||||
}
|
||||
.assist-input-actions {
|
||||
display: flex;
|
||||
@@ -700,8 +840,37 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Streaming */
|
||||
.assist-streaming-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-style: italic;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.assist-preview-box {
|
||||
padding: 0.65rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
font-size: 0.9rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.typing-indicator {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.assist-error {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
||||
border: 1px solid var(--color-danger);
|
||||
@@ -709,29 +878,72 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.assist-preview,
|
||||
.assist-review {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
|
||||
/* Review / diff */
|
||||
.assist-review-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.btn-toggle-view {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-primary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.diff-view {
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
font-size: 0.82rem;
|
||||
font-family: monospace;
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
.assist-proposed {
|
||||
font-size: 0.95rem;
|
||||
.diff-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: 0.05rem 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.typing-indicator {
|
||||
display: inline-block;
|
||||
color: var(--color-text-secondary);
|
||||
animation: blink 1s step-end infinite;
|
||||
.diff-delete {
|
||||
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
.diff-insert {
|
||||
background: color-mix(in srgb, var(--color-success) 12%, transparent);
|
||||
color: var(--color-success);
|
||||
}
|
||||
.diff-equal {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.diff-marker {
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.diff-text {
|
||||
flex: 1;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.diff-empty {
|
||||
padding: 0.5rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.assist-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.btn-accept {
|
||||
padding: 0.4rem 1rem;
|
||||
@@ -801,14 +1013,21 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 768px) {
|
||||
.assist-panel {
|
||||
flex-basis: 45%;
|
||||
}
|
||||
.assist-controls {
|
||||
.editor-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
.assist-sections {
|
||||
flex: none;
|
||||
.assist-panel {
|
||||
width: auto;
|
||||
flex: 0 0 45%;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
.editor-header {
|
||||
padding: 0.75rem 1rem 0.5rem;
|
||||
}
|
||||
.editor-main {
|
||||
padding: 0.5rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -201,14 +201,14 @@ function onTagClick(tag: string) {
|
||||
<style scoped>
|
||||
.viewer-layout {
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
}
|
||||
.viewer {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 960px;
|
||||
max-width: 1100px;
|
||||
margin: 2rem 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -170,7 +170,7 @@ function onOffsetUpdate(offset: number) {
|
||||
|
||||
<style scoped>
|
||||
.tasks-list {
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -289,7 +289,7 @@ function formatDate(iso: string): string {
|
||||
|
||||
<style scoped>
|
||||
.users-page {
|
||||
max-width: 960px;
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user