first commit

src/utils/create-element-at-position.mjs

@@ -0,0 +1,9 @@
+export function createElementAtPosition(x = 0, y = 0, zIndex = 2147483647) {
+  const element = document.createElement('div')
+  element.style.position = 'fixed'
+  element.style.zIndex = zIndex
+  element.style.left = x + 'px'
+  element.style.top = y + 'px'
+  document.documentElement.appendChild(element)
+  return element
+}

src/utils/crop-text.mjs

@@ -0,0 +1,83 @@
+// MIT License
+//
+// Copyright (c) 2023 josStorer
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { maxResponseTokenLength } from '../config.mjs'
+import { encode } from '@nem035/gpt-3-encoder'
+
+// TODO add model support
+export function cropText(
+  text,
+  maxLength = 3900 - maxResponseTokenLength,
+  startLength = 400,
+  endLength = 300,
+  tiktoken = true,
+) {
+  const splits = text.split(/[,，。?？!！;；]/).map((s) => s.trim())
+  const splitsLength = splits.map((s) => (tiktoken ? encode(s).length : s.length))
+  const length = splitsLength.reduce((sum, length) => sum + length, 0)
+
+  const cropLength = length - startLength - endLength
+  const cropTargetLength = maxLength - startLength - endLength
+  const cropPercentage = cropTargetLength / cropLength
+  const cropStep = Math.max(0, 1 / cropPercentage - 1)
+
+  if (cropStep === 0) return text
+
+  let croppedText = ''
+  let currentLength = 0
+  let currentIndex = 0
+  let currentStep = 0
+
+  for (; currentIndex < splits.length; currentIndex++) {
+    if (currentLength + splitsLength[currentIndex] + 1 <= startLength) {
+      croppedText += splits[currentIndex] + ','
+      currentLength += splitsLength[currentIndex] + 1
+    } else if (currentLength + splitsLength[currentIndex] + 1 + endLength <= maxLength) {
+      if (currentStep < cropStep) {
+        currentStep++
+      } else {
+        croppedText += splits[currentIndex] + ','
+        currentLength += splitsLength[currentIndex] + 1
+        currentStep = currentStep - cropStep
+      }
+    } else {
+      break
+    }
+  }
+
+  let endPart = ''
+  let endPartLength = 0
+  for (let i = splits.length - 1; endPartLength + splitsLength[i] <= endLength; i--) {
+    endPart = splits[i] + ',' + endPart
+    endPartLength += splitsLength[i] + 1
+  }
+  currentLength += endPartLength
+  croppedText += endPart
+
+  console.log(
+    `maxLength: ${maxLength}\n` +
+      // `croppedTextLength: ${tiktoken ? encode(croppedText).length : croppedText.length}\n` +
+      `desiredLength: ${currentLength}\n` +
+      `content: ${croppedText}`,
+  )
+  return croppedText
+}

src/utils/ends-with-question-mark.mjs

@@ -0,0 +1,8 @@
+export function endsWithQuestionMark(question) {
+  return (
+    question.endsWith('?') || // ASCII
+    question.endsWith('？') || // Chinese/Japanese
+    question.endsWith('؟') || // Arabic
+    question.endsWith('⸮') // Arabic
+  )
+}

src/utils/fetch-sse.mjs

@@ -0,0 +1,26 @@
+import { createParser } from 'eventsource-parser'
+import { streamAsyncIterable } from './stream-async-iterable'
+
+export async function fetchSSE(resource, options) {
+  const { onMessage, onStart, onEnd, onError, ...fetchOptions } = options
+  const resp = await fetch(resource, fetchOptions)
+  if (!resp.ok) {
+    await onError(resp)
+  }
+  const parser = createParser((event) => {
+    if (event.type === 'event') {
+      onMessage(event.data)
+    }
+  })
+  let hasStarted = false
+  for await (const chunk of streamAsyncIterable(resp.body)) {
+    const str = new TextDecoder().decode(chunk)
+    parser.feed(str)
+
+    if (!hasStarted) {
+      hasStarted = true
+      await onStart(str)
+    }
+  }
+  await onEnd()
+}

src/utils/get-conversation-pairs.mjs

@@ -0,0 +1,17 @@
+export function getConversationPairs(records, isChatgpt) {
+  let pairs
+  if (isChatgpt) {
+    pairs = []
+    for (const record of records) {
+      pairs.push({ role: 'user', content: record['question'] })
+      pairs.push({ role: 'assistant', content: record['answer'] })
+    }
+  } else {
+    pairs = ''
+    for (const record of records) {
+      pairs += 'Human:' + record.question + '\nAI:' + record.answer + '\n'
+    }
+  }
+
+  return pairs
+}

src/utils/get-possible-element-by-query-selector.mjs

@@ -0,0 +1,14 @@
+export function getPossibleElementByQuerySelector(queryArray) {
+  for (const query of queryArray) {
+    if (query) {
+      try {
+        const element = document.querySelector(query)
+        if (element) {
+          return element
+        }
+      } catch (e) {
+        /* empty */
+      }
+    }
+  }
+}

src/utils/index.mjs

@@ -0,0 +1,13 @@
+export * from './create-element-at-position'
+export * from './crop-text'
+export * from './ends-with-question-mark'
+export * from './fetch-sse'
+export * from './get-conversation-pairs'
+export * from './get-possible-element-by-query-selector'
+export * from './init-session'
+export * from './is-mobile'
+export * from './is-safari'
+export * from './limited-fetch'
+export * from './set-element-position-in-viewport'
+export * from './stream-async-iterable'
+export * from './update-ref-height'

src/utils/init-session.mjs

@@ -0,0 +1,30 @@
+/**
+ * @typedef {object} Session
+ * @property {string|null} question
+ * @property {string|null} conversationId - chatGPT web mode
+ * @property {string|null} messageId - chatGPT web mode
+ * @property {string|null} parentMessageId - chatGPT web mode
+ * @property {Object[]|null} conversationRecords
+ * @property {bool|null} useApiKey
+ */
+/**
+ * @param {Session} session
+ * @returns {Session}
+ */
+export function initSession({
+  question = null,
+  conversationId = null,
+  messageId = null,
+  parentMessageId = null,
+  conversationRecords = [],
+  useApiKey = null,
+} = {}) {
+  return {
+    question,
+    conversationId,
+    messageId,
+    parentMessageId,
+    conversationRecords,
+    useApiKey,
+  }
+}

src/utils/is-mobile.mjs

@@ -0,0 +1,17 @@
+// https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
+
+export async function isMobile() {
+  let check = false
+  ;(function (a) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+        a,
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        a.substr(0, 4),
+      )
+    )
+      check = true
+  })(navigator.userAgent || navigator.vendor || window.opera)
+  return check
+}

src/utils/is-safari.mjs

@@ -0,0 +1,3 @@
+export function isSafari() {
+  return navigator.vendor === 'Apple Computer, Inc.'
+}

src/utils/limited-fetch.mjs

@@ -0,0 +1,25 @@
+// https://stackoverflow.com/questions/64304365/stop-request-after-x-amount-is-fetched
+
+export async function limitedFetch(url, maxBytes) {
+  return new Promise((resolve, reject) => {
+    try {
+      const xhr = new XMLHttpRequest()
+      xhr.onprogress = (ev) => {
+        if (ev.loaded < maxBytes) return
+        resolve(ev.target.responseText.substring(0, maxBytes))
+        xhr.abort()
+      }
+      xhr.onload = (ev) => {
+        resolve(ev.target.responseText.substring(0, maxBytes))
+      }
+      xhr.onerror = (ev) => {
+        reject(new Error(ev.target.status))
+      }
+
+      xhr.open('GET', url)
+      xhr.send()
+    } catch (err) {
+      reject(err)
+    }
+  })
+}

src/utils/set-element-position-in-viewport.mjs

@@ -0,0 +1,7 @@
+export function setElementPositionInViewport(element, x = 0, y = 0) {
+  const retX = Math.min(window.innerWidth - element.offsetWidth, Math.max(0, x))
+  const retY = Math.min(window.innerHeight - element.offsetHeight, Math.max(0, y))
+  element.style.left = retX + 'px'
+  element.style.top = retY + 'px'
+  return { x: retX, y: retY }
+}

src/utils/stream-async-iterable.mjs

@@ -0,0 +1,14 @@
+export async function* streamAsyncIterable(stream) {
+  const reader = stream.getReader()
+  try {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) {
+        return
+      }
+      yield value
+    }
+  } finally {
+    reader.releaseLock()
+  }
+}

src/utils/update-ref-height.mjs

@@ -0,0 +1,11 @@
+export function updateRefHeight(ref) {
+  ref.current.style.height = 'auto'
+  const computed = window.getComputedStyle(ref.current)
+  const height =
+    parseInt(computed.getPropertyValue('border-top-width'), 10) +
+    parseInt(computed.getPropertyValue('padding-top'), 10) +
+    ref.current.scrollHeight +
+    parseInt(computed.getPropertyValue('padding-bottom'), 10) +
+    parseInt(computed.getPropertyValue('border-bottom-width'), 10)
+  ref.current.style.height = `${height}px`
+}