ui.html

<script>
	window.onmessage = async (event) => {
		if (event.data.pluginMessage.type === 'cancel') {
			window.activeRequest.abort()
		}

		if (event.data.pluginMessage.type === 'submit-stream') {
			const {messages, key, model, temp, topP, anthropicProxyURL} =
				event.data.pluginMessage
			const isGPT = () => model.startsWith('gpt')
			const xhr = new XMLHttpRequest()

			// Set up the request
			xhr.open(
				'POST',
				isGPT()
					? 'https://api.openai.com/v1/chat/completions'
					: `${anthropicProxyURL}/v1/complete`,
				true
			)
			xhr.setRequestHeader('Content-Type', 'application/json')
			isGPT()
				? xhr.setRequestHeader('Authorization', `Bearer ${key}`)
				: xhr.setRequestHeader('X-API-Key', key)

			// Handle errors
			xhr.onload = () => {
				try {
					// try to parse the response
					// (if we can parse it, it is an error)
					const response = JSON.parse(xhr.response)
					if (response.error) {
						// ERROR
						window.parent.postMessage(
							{pluginMessage: {error: response.error}},
							'*'
						)
						return
					}
				} catch (e) {
					// Unparseable response
					// It is likely a stream response
					// (this is a good thing, it means its not an error)
				}
			}

			// Handle streaming
			xhr.onreadystatechange = function () {
				const {responseText, readyState, status} = xhr
				const messagesWithoutSystem = messages.filter(
					(msg) => msg.role !== 'system'
				)
				if (xhr.readyState === 4 && !xhr.status) {
					// Connection Failed
					window.parent.postMessage(
						{
							pluginMessage: {
								error: {
									message: isGPT()
										? 'Connection Error.\n\nOpenAI may be experiencing issues, or the Internet may be unavailable.'
										: 'Connection Error.\n\nYour Anthropic Proxy may not be running,\nAnthropic itself may be experiencing issues,\nor the Internet may be unavailable.'
								}
							}
						},
						'*'
					)
					return
				}
				if (xhr.readyState === 3 && xhr.status === 200) {
					const completion = extractAndCombineData(
						xhr.responseText,
						model,
						messages
					)
					window.parent.postMessage(
						{
							pluginMessage: {
								messages: [
									...messagesWithoutSystem,
									completion
								],
								state: 'streaming'
							}
						},
						'*'
					)
				}
				if (xhr.readyState === 4 && xhr.status === 200) {
					// COMPLETE
					window.activeRequest = undefined
					const completion = extractAndCombineData(
						xhr.responseText,
						model,
						messages
					)
					window.parent.postMessage(
						{
							pluginMessage: {
								messages: [
									...messagesWithoutSystem,
									completion
								],
								state: 'complete'
							}
						},
						'*'
					)
				}
			}
			xhr.send(
				JSON.stringify(
					isGPT()
						? {
								model,
								messages: messages.map((msg) => {
									// Remove the "collapsed" property before sending to OpenAI
									const {collapsed, ...rest} = msg
									return rest
								}),
								temperature: temp,
								top_p: topP,
								stream: true
						  }
						: {
								model,
								prompt: `${claudify(messages)}\n\nAssistant:`,
								temperature: temp,
								top_p: topP,
								stream: true
						  }
				)
			)
		}
	}

	function extractAndCombineData(responseText, model, messages) {
		const isGPT = () => model.startsWith('gpt')
		const lines = responseText.split('\n')
		let combinedDelta = {role: '', content: ''}

		for (const line of lines) {
			if (line.startsWith('data:')) {
				const jsonString = line.substring(5).trim() // Remove the "data:" prefix

				try {
					const jsonObj = JSON.parse(jsonString)

					if (isGPT()) {
						// OpenAI
						if (
							jsonObj.choices &&
							jsonObj.choices[0] &&
							jsonObj.choices[0].delta
						) {
							const delta = jsonObj.choices[0].delta

							if (delta.role) {
								combinedDelta.role = delta.role
							}

							if (delta.content) {
								combinedDelta.content += delta.content
							}
						}
					} else {
						// Anthropic
						if (jsonObj.completion) {
							combinedDelta.role = 'assistant'
							combinedDelta.content = jsonObj.completion.trim()
						}
					}
				} catch (error) {
					// Ignore any parsing errors, such as "data: [DONE]" message
				}
			}
		}

		return combinedDelta
	}

	/* -- Claudify -- */

	// Converts a ChatGPT-style chat into a string that Claude can understand
	const claudify = (chat) => {
		let claudeString = ''

		chat.forEach((message) => {
			if (message.role === 'user' || message.role === 'system') {
				claudeString += `\n\nHuman: ${message.content}`
			} else if (message.role === 'assistant') {
				claudeString += `\n\nAssistant: ${message.content}`
			}
		})

		return claudeString
	}

	/* -- GPTify -- */

	// Converts a Claude-style chat into a string that GPT-4 can understand
	const gptify = (claudeText, model) => {
		const lines = claudeText.trim().split('\n\n')
		const gptFormat = []

		for (let i = 0; i < lines.length; i++) {
			const line = lines[i].trim()
			if (line.length === 0) {
				continue
			}
			const separatorIndex = line.indexOf(':')
			const role = line.slice(0, separatorIndex).trim()
			const content = line.slice(separatorIndex + 1).trim()

			if (role === 'Human') {
				gptFormat.push({
					role: 'user',
					content: content
				})
			} else if (role === 'Assistant') {
				gptFormat.push({
					role: 'assistant',
					content: content
				})
			}
		}

		return gptFormat
	}
</script>