diff --git a/manifest.json b/manifest.json index 4410320..15e2863 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-weaver", "name": "Weaver", - "version": "0.3.0", + "version": "0.3.2", "minAppVersion": "1.0.0", "description": "Weaver is a useful Obsidian plugin that integrates ChatGPT/GPT-3 into your note-taking workflow. This plugin makes it easy to access AI-generated suggestions and insights within Obsidian, helping you improve your writing and brainstorming process.", "author": "Vasile Câmpeanu", diff --git a/package-lock.json b/package-lock.json index d34175e..0f446f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,21 +1,24 @@ { "name": "obsidian-weaver", - "version": "0.3.0", + "version": "0.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "obsidian-weaver", - "version": "0.3.4", + "version": "0.3.2", "license": "MIT", "dependencies": { "@types/axios": "^0.14.0", "@types/react": "^18.0.31", "@types/react-dom": "^18.0.11", + "@types/turndown": "^5.0.1", "bson": "^5.1.0", "esbuild-sass-plugin": "^2.8.0", "fast-fuzzy": "^1.12.0", "jaro-winkler": "^0.2.8", + "katex": "^0.16.4", + "mathml-to-latex": "^1.2.0", "natural": "^6.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -24,10 +27,13 @@ "react-syntax-highlighter": "^15.5.0", "remark-gfm": "^3.0.1", "safe-await": "^2.0.0", - "stopword": "^2.0.8" + "stopword": "^2.0.8", + "turndown": "^7.1.2", + "turndown-plugin-gfm": "^1.0.2" }, "devDependencies": { "@types/jaro-winkler": "^0.2.1", + "@types/katex": "^0.16.0", "@types/node": "^16.18.23", "@types/react-loader-spinner": "^4.0.0", "@types/react-syntax-highlighter": "^15.5.6", @@ -896,6 +902,12 @@ "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==", "dev": true }, + "node_modules/@types/katex": { + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz", + "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw==", + "dev": true + }, "node_modules/@types/mdast": { "version": "3.0.11", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz", @@ -971,6 +983,11 @@ "@types/estree": "*" } }, + "node_modules/@types/turndown": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@types/turndown/-/turndown-5.0.1.tgz", + "integrity": "sha512-N8Ad4e3oJxh9n9BiZx9cbe/0M3kqDpOTm2wzj13wdDUxDPjfjloWIJaquZzWE1cYTAHpjOH3rcTnXQdpEfS/SQ==" + }, "node_modules/@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", @@ -1532,6 +1549,14 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "engines": { + "node": ">= 12" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1661,6 +1686,11 @@ "node": ">=6.0.0" } }, + "node_modules/domino": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz", + "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==" + }, "node_modules/esbuild": { "version": "0.17.12", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.12.tgz", @@ -2612,6 +2642,21 @@ "dev": true, "peer": true }, + "node_modules/katex": { + "version": "0.16.4", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.4.tgz", + "integrity": "sha512-WudRKUj8yyBeVDI4aYMNxhx5Vhh2PjpzQw1GRu/LVGqL4m1AxwD1GcUp0IMbdJaf5zsjtj8ghP0DOQRYhroNkw==", + "funding": [ + "https://opencollective.com/katex", + "https://github.com/sponsors/katex" + ], + "dependencies": { + "commander": "^8.0.0" + }, + "bin": { + "katex": "cli.js" + } + }, "node_modules/kleur": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz", @@ -2716,6 +2761,14 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/mathml-to-latex": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/mathml-to-latex/-/mathml-to-latex-1.2.0.tgz", + "integrity": "sha512-AgwKE5vYJItWsi7qrzzxD8h+YUbv/FH1p1XOs/v/pVFUXHaK+GQZvrU8h7LYmkkfM97zFIPfbWrXJT4Qowykug==", + "dependencies": { + "xmldom": "^0.4.0" + } + }, "node_modules/mdast-util-definitions": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz", @@ -4427,6 +4480,19 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true }, + "node_modules/turndown": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.2.tgz", + "integrity": "sha512-ntI9R7fcUKjqBP6QU8rBK2Ehyt8LAzt3UBT9JR9tgo6GtuKvyUzpayWmeMKJw1DPdXzktvtIT8m2mVXz+bL/Qg==", + "dependencies": { + "domino": "^2.1.6" + } + }, + "node_modules/turndown-plugin-gfm": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz", + "integrity": "sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -4673,6 +4739,15 @@ "dev": true, "peer": true }, + "node_modules/xmldom": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.4.0.tgz", + "integrity": "sha512-2E93k08T30Ugs+34HBSTQLVtpi6mCddaY8uO+pMNk1pqSjV5vElzn4mmh6KLxN3hki8rNcHSYzILoh3TEWORvA==", + "deprecated": "Deprecated due to CVE-2021-21366 resolved in 0.5.0", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/package.json b/package.json index 0186f9a..1b4c15f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-weaver", - "version": "0.3.0", + "version": "0.3.2", "description": "Weaver is a useful Obsidian plugin that integrates ChatGPT/GPT-3 into your note-taking workflow. This plugin makes it easy to access AI-generated suggestions and insights within Obsidian, helping you improve your writing and brainstorming process.", "main": "main.js", "scripts": { @@ -28,6 +28,7 @@ "@types/axios": "^0.14.0", "@types/react": "^18.0.31", "@types/react-dom": "^18.0.11", + "@types/turndown": "^5.0.1", "bson": "^5.1.0", "esbuild-sass-plugin": "^2.8.0", "fast-fuzzy": "^1.12.0", @@ -40,6 +41,8 @@ "react-syntax-highlighter": "^15.5.0", "remark-gfm": "^3.0.1", "safe-await": "^2.0.0", - "stopword": "^2.0.8" + "stopword": "^2.0.8", + "turndown": "^7.1.2", + "turndown-plugin-gfm": "^1.0.2" } } diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index 100922a..69a376f 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -146,8 +146,8 @@ export const HomePage: React.FC = ({ {conversation.timestamp.substring(0, 10)} -
-
+
+
{showDeleteConfirmation === conversation.id ? (
) : ( <> @@ -65,7 +65,7 @@ export const InputArea: React.FC = ({
+
+
); }; + diff --git a/src/components/TabsManager.tsx b/src/components/chat/TabsManager.tsx similarity index 92% rename from src/components/TabsManager.tsx rename to src/components/chat/TabsManager.tsx index 12c4a61..31522e0 100644 --- a/src/components/TabsManager.tsx +++ b/src/components/chat/TabsManager.tsx @@ -1,8 +1,8 @@ import Weaver from 'main' import React, { useEffect, useState } from 'react'; -import { HomePage } from './HomePage'; -import { ConversationDialogue } from './chat/ConversationDialogue'; +import { HomePage } from '../HomePage'; +import { ConversationDialogue } from './ConversationDialogue'; export interface TabsManagerProps { plugin: Weaver diff --git a/src/components/WeaverChatView.tsx b/src/components/chat/WeaverChatView.tsx similarity index 93% rename from src/components/WeaverChatView.tsx rename to src/components/chat/WeaverChatView.tsx index 04ae1eb..2721e0b 100644 --- a/src/components/WeaverChatView.tsx +++ b/src/components/chat/WeaverChatView.tsx @@ -3,8 +3,8 @@ import { ItemView, WorkspaceLeaf, Platform } from 'obsidian'; import { createRoot, Root } from "react-dom/client"; import React from 'react'; -import { WEAVER_CHAT_VIEW_TYPE } from '../constants'; -import Weaver from '../main' +import { WEAVER_CHAT_VIEW_TYPE } from '../../constants'; +import Weaver from '../../main' import { TabsManager } from './TabsManager'; diff --git a/src/main.ts b/src/main.ts index 65d48b1..e0ac9ae 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,7 @@ import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Set import { DEFAULT_SETTINGS, WeaverSettings, WeaverSettingTab } from './settings' import { WEAVER_CHAT_VIEW_TYPE } from './constants' -import { WeaverChatView } from './components/WeaverChatView'; +import { WeaverChatView } from './components/chat/WeaverChatView'; export default class Weaver extends Plugin { public settings: WeaverSettings; diff --git a/src/settings.ts b/src/settings.ts index 0c05296..a8d5c6e 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -29,7 +29,7 @@ export const DEFAULT_SETTINGS: WeaverSettings = { temperature: 0.7, frequency_penalty: 0.5, weaverFolderPath: "bins/weaver", - systemRolePrompt: "You are a personal knowledge management assistant designed to work within Obsidian, a popular note-taking and knowledge management tool. Your purpose is to help users organize, manage, and expand their knowledge base by providing well-structured, informative, and relevant responses. Please ensure that you format all of your responses using Markdown syntax, which is the default formatting language used in Obsidian. This includes, but is not limited to, using appropriate headers, lists, links, bold and italic text, and code blocks. Please also provide suggestions for relevant tags or links to related notes within the user's Obsidian vault when applicable.", + systemRolePrompt: "You are a personal knowledge management assistant designed to work within Obsidian, a popular note-taking and knowledge management tool. Your purpose is to help users organize, manage, and expand their knowledge base by providing well-structured, informative, and relevant responses. Please ensure that you format your responses using Markdown syntax, which is the default formatting language used in Obsidian. This includes, but is not limited to, using appropriate headers, lists, links and code blocks. In addition to Markdown, please utilize LaTeX formatting when necessary to render mathematical symbols and equations in a clear and concise manner. This includes, but is not limited to, using symbols such as $\alpha$, $\beta$, $\gamma$, $\delta$, and $\theta$ and equations like $f(x) = x^2 + 2x + 1$ and $\int_{0}^{\infty} e^{-x^2} dx$. For formulas that are on a single line, enclose the LaTeX code between four dollar signs ($$$$) Please ensure that you follow proper LaTeX syntax and formatting guidelines to ensure the readability and coherence of your responses.", showWelcomeMessage: true, openOnStartUp: true } @@ -51,7 +51,7 @@ export class WeaverSettingTab extends PluginSettingTab { containerEl.createEl('h1', { text: 'Weaver Settings' }); containerEl.createEl('h2', { - text: 'OpenAI Settings' + text: 'OpenAI' }); // API Key @@ -91,7 +91,7 @@ export class WeaverSettingTab extends PluginSettingTab { // Engine Settinhgs containerEl.createEl('h2', { - text: 'Model Configuration Settings' + text: 'Model Configuration' }); new Setting(containerEl) diff --git a/src/styles/components/ChatComponent.scss b/src/styles/components/ChatComponent.scss index 87b9b6d..9e9eaf7 100644 --- a/src/styles/components/ChatComponent.scss +++ b/src/styles/components/ChatComponent.scss @@ -31,7 +31,7 @@ background-color: var(--background-modifier-hover); } - cursor: pointer; + cursor: var(--cursor); svg { @@ -65,150 +65,7 @@ text-overflow: ellipsis; } } - } - } - - .conversation-history - { - display: grid; - grid-auto-rows: min-content; - // align-content: start; - gap: var(--grid-gap-lg); - overflow-y: auto; - padding: var(--padding-sm) var(--padding-lg); - background: var(--background-secondary); - - .message-bubble - { - user-select: text; - font-size: var(--font-size-sm); - display: grid; - grid-template-rows: auto auto; - padding: var(--padding-md); - max-width: 90%; - border-radius: 10px; - border: 1px solid var(--prompt-border-color); - box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; - - .message-content - { - word-wrap: break-word; - - .three-dots-leader - { - svg - { - fill: var(--interactive-accent) !important; - } - } - - pre - { - margin: 0px !important; - - .code-block-container - { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - - .code-block - { - background-color: rgba(0, 0, 0, 85) !important; - border: none !important; - - code - { - background-color: transparent !important; - font-size: var(--font-size-sm) !important; - font-family: var(--font-monospace) !important; - } - } - } - } - - table - { - border-collapse: collapse; - width: 100%; - - th - { - border: 1px solid var(--prompt-border-color); - padding: 5px; - font-weight: bold; - text-align: left; - } - - td - { - padding: 5px; - border: 1px solid var(--prompt-border-color); - } - } - - p - { - &:first-child - { - margin-top: 0px; - } - - &:only-child - { - margin: 0px; - } - - &:not(:only-child) - { - margin-bottom: 10px 0px; - } - - &:last-child - { - margin-bottom: 0px; - } - } - - ul - { - padding-left: 20px !important; - } - } - - .timestamp - { - display: none; - } - &.message-user - { - .message-content *::selection - { - background-color: rgba(246, 246, 246, 0.3) !important; - opacity: .5 !important; - } - } - - &.message-user - { - justify-self: end; - background-color: var(--interactive-accent); - color: #ffffff; - - .code-block - { - } - } - - &.message-assistant - { - justify-self: start; - background-color: var(--assistant-message-color); - - .code-block - { - } - } } } @@ -234,7 +91,7 @@ grid-template-columns: auto 1fr; gap: var(--grid-gap-sm); justify-self: end; - cursor: pointer; + cursor: var(--cursor); background-color: var(--btn-stop-color); border: 1px solid var(--prompt-border-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; @@ -259,7 +116,7 @@ grid-template-columns: auto 1fr; gap: var(--grid-gap-md); - .btn-clean + .btn-new-chat { all: unset; display: grid; @@ -267,16 +124,14 @@ height: 40px; width: 40px; border-radius: 50%; - background-color: var(--interactive-accent); + background-color: hsla(var(--interactive-accent-hsl), 0.55); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; color: #ffffff; - cursor: pointer; - - opacity: .75; + cursor: var(--cursor); &:hover { - opacity: 1; + background-color: hsla(var(--interactive-accent-hsl), .75); } svg @@ -340,7 +195,7 @@ { all: unset; align-self: start; - cursor: pointer; + cursor: var(--cursor); svg { @@ -366,7 +221,7 @@ .pin-chat-box { all: unset; - cursor: pointer; + cursor: var(--cursor); svg { @@ -382,7 +237,7 @@ { svg { - opacity: .65; + opacity: .75; } } diff --git a/src/styles/components/HomePage.scss b/src/styles/components/HomePage.scss index cbf292d..8dc42f7 100644 --- a/src/styles/components/HomePage.scss +++ b/src/styles/components/HomePage.scss @@ -47,7 +47,7 @@ .btn-new-chat { all: unset; - cursor: pointer; + cursor: var(--cursor); display: grid; border-radius: 5px; padding: var(--padding-xs); @@ -83,6 +83,7 @@ display: grid; align-content: start; padding: var(--padding-sm) var(--padding-lg); + padding-bottom: 37px; gap: var(--grid-gap-sm); background: var(--background-secondary); @@ -150,7 +151,7 @@ } } - .item-actions + .item-ow-actions { display: flex; @@ -165,7 +166,7 @@ &.show { - .actions + .ow-actions { display: flex !important; } @@ -176,7 +177,7 @@ } } - .actions + .ow-actions { display: none; // gap: var(--grid-gap-sm); @@ -191,7 +192,7 @@ { all: unset; display: grid; - cursor: pointer; + cursor: var(--cursor); align-self: center; padding: var(--padding-xs); border-radius: 3.5px; @@ -214,7 +215,7 @@ { all: unset; display: grid; - cursor: pointer; + cursor: var(--cursor); align-self: center; padding: var(--padding-xs); border-radius: 3.5px; @@ -238,7 +239,7 @@ { all: unset; display: grid; - cursor: pointer; + cursor: var(--cursor); align-self: center; padding: var(--padding-xs); border-radius: 3.5px; @@ -261,7 +262,7 @@ { all: unset; display: grid; - cursor: pointer; + cursor: var(--cursor); align-self: center; padding: var(--padding-xs); border-radius: 3.5px; @@ -289,7 +290,7 @@ display: none; } - .actions + .ow-actions { display: flex; } @@ -349,7 +350,7 @@ // display: flex; // align-items: center; // justify-content: center; - // cursor: pointer; + // cursor: var(--cursor); // gap: 10px; // border-radius: 5px; // padding: 10px; diff --git a/src/styles/components/Variables.scss b/src/styles/components/Variables.scss index 44ee84d..750c9fd 100644 --- a/src/styles/components/Variables.scss +++ b/src/styles/components/Variables.scss @@ -33,6 +33,11 @@ --font-size-md: 16px; } +:root +{ + --test: var(--interactive-accent); +} + :root { --assistant-message-color: #F6F6F6; diff --git a/src/styles/components/chat/ChatHeader.scss b/src/styles/components/chat/ChatHeader.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/components/chat/ConversationDialogue.scss b/src/styles/components/chat/ConversationDialogue.scss new file mode 100644 index 0000000..db7059e --- /dev/null +++ b/src/styles/components/chat/ConversationDialogue.scss @@ -0,0 +1,143 @@ +.conversation-history +{ + display: grid; + grid-auto-rows: min-content; + // align-content: start; + gap: var(--grid-gap-lg); + overflow-y: auto; + padding: var(--padding-sm) var(--padding-lg); + background: var(--background-secondary); + + .message-bubble + { + user-select: text; + font-size: var(--font-size-sm); + display: grid; + grid-template-rows: auto auto; + padding: var(--padding-md); + max-width: 90%; + border-radius: 10px; + border: 1px solid var(--prompt-border-color); + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; + + .message-content + { + word-wrap: break-word; + + .three-dots-leader + { + svg + { + fill: var(--interactive-accent) !important; + } + } + + pre + { + margin: 0px !important; + + .code-block-container + { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + + .code-block + { + background-color: rgba(0, 0, 0, 85) !important; + border: none !important; + + code + { + background-color: transparent !important; + font-size: var(--font-size-sm) !important; + font-family: var(--font-monospace) !important; + } + } + } + } + + table + { + border-collapse: collapse; + width: 100%; + + th + { + border: 1px solid var(--prompt-border-color); + padding: 5px; + font-weight: bold; + text-align: left; + } + + td + { + padding: 5px; + border: 1px solid var(--prompt-border-color); + } + } + + p + { + &:first-child + { + margin-top: 0px; + } + + &:only-child + { + margin: 0px; + } + + &:not(:only-child) + { + margin-bottom: 10px 0px; + } + + &:last-child + { + margin-bottom: 0px; + } + } + + ul + { + padding-left: 20px !important; + } + } + + .timestamp + { + display: none; + } + + &.message-user + { + .message-content *::selection + { + background-color: rgba(246, 246, 246, 0.3) !important; + opacity: .5 !important; + } + } + + &.message-user + { + justify-self: end; + background-color: var(--interactive-accent); + color: #ffffff; + + .code-block + { + } + } + + &.message-assistant + { + justify-self: start; + background-color: var(--assistant-message-color); + + .code-block + { + } + } + } +} diff --git a/src/styles/components/chat/DialogueTimeline.scss b/src/styles/components/chat/DialogueTimeline.scss new file mode 100644 index 0000000..779ccb1 --- /dev/null +++ b/src/styles/components/chat/DialogueTimeline.scss @@ -0,0 +1,230 @@ +.ow-dialogue-timeline +{ + display: grid; + grid-auto-rows: min-content; + gap: var(--grid-gap-lg); + overflow-y: auto; + padding: var(--padding-sm) var(--padding-lg); + background: var(--background-secondary); + + .ow-message-bubble + { + display: flex; + gap: calc(10px - 2.5px); + + &.ow-assistant-bubble + { + justify-content: start; + + .ow-content-wrapper + { + order: 1; + background-color: var(--assistant-message-color); + + .ow-message-content + { + .callout + { + background-color: rgba(var(--callout-color), 0.35); + } + } + } + + .ow-bubble-ow-actions + { + order: 2; + } + } + + &.ow-user-bubble + { + justify-content: end; + + .ow-content-wrapper + { + order: 2; + background-color: hsla(var(--interactive-accent-hsl), 0.55); + color: #ffffff; + + .ow-message-content *::selection + { + background-color: rgba(246, 246, 246, 0.3) !important; + opacity: .5 !important; + } + + .ow-message-content + { + .callout + { + background-color: rgba(var(--callout-color), .25); + } + } + } + + .ow-bubble-ow-actions + { + order: 1; + } + } + + .ow-content-wrapper + { + user-select: text; + font-size: var(--font-size-sm); + display: grid; + grid-template-rows: auto auto; + padding: var(--padding-md); + max-width: 87.5%; + border-radius: 10px; + border: 1px solid var(--prompt-border-color); + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; + + .ow-message-content + { + word-wrap: break-word; + + .ow-three-dots-leader + { + svg + { + fill: hsla(var(--interactive-accent-hsl), 0.55); + } + } + + p + { + &:only-child + { + margin: 0px; + } + + &:first-child + { + margin-top: 0px; + } + + &:last-child + { + margin-bottom: 0px; + } + } + + table + { + border-collapse: collapse; + width: 100%; + + th + { + border: 1px solid var(--prompt-border-color); + padding: 5px; + font-weight: bold; + text-align: left; + } + + td + { + padding: 5px; + border: 1px solid var(--prompt-border-color); + } + } + + pre + { + margin: 0px; + border-radius: 5px; + position: relative; + + .copy-code-button + { + margin: 6px; + padding: 6px 8px; + height: auto; + background-color: transparent; + box-shadow: none; + color: var(--text-muted); + font-size: var(--font-ui-smaller); + font-family: var(--font-interface); + position: absolute; + top: 0; + right: 0; + display: none; + + &:hover + { + background-color: var(--interactive-normal); + } + } + + &:hover .copy-code-button + { + display: block; + } + } + + code:not([class]):not([lang]) + { + color: var(--code-normal); + font-family: var(--font-monospace); + background-color: var(--code-background); + border-radius: var(--radius-s); + font-size: var(--code-size); + padding: 0.1em 0.25em; + } + + blockquote + { + color: var(--blockquote-color); + margin: 0px !important; + padding: 0px 10px !important; + border-left: var(--blockquote-border-thickness) solid var(--blockquote-border-color); + } + + ul + { + padding-left: 20px !important; + } + + ol + { + padding-left: 20px !important; + } + } + } + + .ow-bubble-ow-actions + { + .ow-actions + { + opacity: 0; + + .ow-copy-button + { + all: unset; + cursor: var(--cursor); + + svg + { + width: var(--svg-size-xs); + height: var(--svg-size-xs); + color: var(--icon-color); + opacity: .5; + } + + &:hover + { + svg + { + opacity: .75; + } + } + } + } + } + + &:hover .ow-bubble-ow-actions .ow-actions + { + opacity: 1; + } + } +} diff --git a/src/styles/components/chat/InputArea.scss b/src/styles/components/chat/InputArea.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/components/chat/MessageBouble.scss b/src/styles/components/chat/MessageBouble.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/styles.scss b/src/styles/styles.scss index fa9781b..75c608b 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,4 +1,7 @@ @import './components/Variables.scss'; @import './components/General.scss'; @import './components/HomePage.scss'; + +// Chat @import './components/ChatComponent.scss'; +@import './components/chat/DialogueTimeline.scss'; diff --git a/tsconfig.json b/tsconfig.json index 8801f54..54e1aa7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "jsx": "react", + "esModuleInterop": true, "allowSyntheticDefaultImports": true, "baseUrl": "src", "inlineSourceMap": true, diff --git a/versions.json b/versions.json index c347261..0ae0208 100644 --- a/versions.json +++ b/versions.json @@ -1,3 +1,3 @@ { - "0.3.0": "1.0.0" + "0.3.2": "1.0.0" }