#AI 聊天应用中涉及到的前端技术

import MarkdownIt from 'markdown-it';

const md = new MarkdownIt({
  html: false,
  linkify: true,
  typographer: true,
  breaks: true,
});

const html = md.render('## 标题\n\n这是一段 **Markdown** 内容');

import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import DOMPurify from 'dompurify';

const md = new MarkdownIt({
  html: false,
  linkify: true,
  breaks: true,
  highlight(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return `<pre class="hljs"><code>${hljs.highlight(code, { language: lang }).value}</code></pre>`;
    }

    return `<pre class="hljs"><code>${md.utils.escapeHtml(code)}</code></pre>`;
  },
});

export function renderMarkdown(content) {
  const html = md.render(content);

  return DOMPurify.sanitize(html, {
    ADD_ATTR: ['target', 'rel'],
  });
}

const defaultRender =
  md.renderer.rules.link_open ||
  function(tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };

md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
  const token = tokens[idx];
  const href = token.attrGet('href') || '';

  if (/^https?:\/\//.test(href)) {
    token.attrSet('target', '_blank');
    token.attrSet('rel', 'noopener noreferrer');
  }

  return defaultRender(tokens, idx, options, env, self);
};

let rawContent = '';
let renderTimer = null;

function onMessageChunk(chunk) {
  rawContent += chunk;

  if (renderTimer) return;

  renderTimer = requestAnimationFrame(() => {
    renderTimer = null;
    message.html = renderMarkdown(rawContent);
  });
}

const fence = md.renderer.rules.fence;

md.renderer.rules.fence = function(tokens, idx, options, env, self) {
  const token = tokens[idx];
  const lang = token.info.trim() || 'text';
  const rendered = fence(tokens, idx, options, env, self);

  return `
    <div class="code-block" data-lang="${md.utils.escapeHtml(lang)}">
      <div class="code-block__header">
        <span>${md.utils.escapeHtml(lang)}</span>
        <button type="button" class="code-block__copy">复制</button>
      </div>
      ${rendered}
    </div>
  `;
};

const source = new EventSource('/api/chat/stream?conversationId=1');

source.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  appendContent(data.content);
});

source.addEventListener('done', () => {
  source.close();
});

source.onerror = () => {
  source.close();
};

const response = await fetch('/api/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    messages,
  }),
});

if (!response.body) {
  throw new Error('当前浏览器不支持 ReadableStream');
}

const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = '';

while (true) {
  const { value, done } = await reader.read();

  if (done) break;

  buffer += decoder.decode(value, { stream: true });
  const lines = buffer.split('\n');

  buffer = lines.pop() || '';

  for (const line of lines) {
    if (!line.startsWith('data:')) continue;

    const text = line.replace(/^data:\s?/, '');

    if (text === '[DONE]') {
      break;
    }

    const data = JSON.parse(text);
    appendContent(data.content || '');
  }
}

const controller = new AbortController();

async function sendMessage() {
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ messages }),
    signal: controller.signal,
  });

  for await (const event of readChatStream(response)) {
    if (event.type === 'message') {
      appendContent(event.content);
    }

    if (event.type === 'done') {
      break;
    }
  }
}

function stopGenerate() {
  controller.abort();
}

function handlePaste(event) {
  event.preventDefault();

  const text = event.clipboardData.getData('text/plain');
  document.execCommand('insertText', false, text);
}

function insertMention(range, mention) {
  const node = document.createElement('span');

  node.className = 'mention';
  node.contentEditable = 'false';
  node.dataset.id = mention.id;
  node.textContent = `@${mention.name}`;

  range.deleteContents();
  range.insertNode(node);
  range.setStartAfter(node);
  range.collapse(true);

  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

import { toPng } from 'html-to-image';

async function exportImage(node) {
  const dataUrl = await toPng(node, {
    cacheBust: true,
    pixelRatio: 2,
    backgroundColor: '#ffffff',
  });

  const link = document.createElement('a');

  link.download = 'chat-share.png';
  link.href = dataUrl;
  link.click();
}

window.print();

import { Document, Packer, Paragraph, TextRun } from 'docx';

async function exportDocx(messages) {
  const doc = new Document({
    sections: [
      {
        children: messages.map((message) => {
          return new Paragraph({
            children: [
              new TextRun({
                text: `${message.role}: ${message.text}`,
              }),
            ],
          });
        }),
      },
    ],
  });

  const blob = await Packer.toBlob(doc);
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');

  link.href = url;
  link.download = 'chat.docx';
  link.click();
  URL.revokeObjectURL(url);
}

const queue = [];
let typing = false;

function pushChunk(chunk) {
  queue.push(...chunk);

  if (!typing) {
    typing = true;
    requestAnimationFrame(typeNext);
  }
}

function typeNext() {
  const chars = queue.splice(0, 3).join('');

  if (chars) {
    appendContent(chars);
  }

  if (queue.length > 0) {
    requestAnimationFrame(typeNext);
  } else {
    typing = false;
  }
}

function isNearBottom(container) {
  return (
    container.scrollHeight -
      container.scrollTop -
      container.clientHeight <
    80
  );
}

function appendContent(content) {
  const shouldStick = isNearBottom(messageList);

  updateMessage(content);

  if (shouldStick) {
    messageList.scrollTop = messageList.scrollHeight;
  }
}