Add ChatGPT notes

Author: Josh-Cena

assets/avatar.svg

@@ -1,4 +1,6 @@
+allowtransparency
 backquote
+buendía
 casedness
 cena
 charis
@@ -7,11 +9,15 @@ cmyk
 codomain
 conlang
 copiable
+counterplay
 coursetable
 dialytika
 dotless
+emboard
 estree
+fianchetto
 flattenable
+garcía
 huayu
 infty
 injectivity
@@ -22,6 +28,7 @@ kwargs
 letterlike
 lext
 luo
+márquez's
 mathbb
 mathcal
 mathtt
@@ -38,6 +45,7 @@ pipeable
 posix
 prismjs
 prosgegrammeni
+queenside
 randcolor
 rehype
 saturationl

assets/chatgpt-logo.svg

@@ -54,7 +54,7 @@
 
 .promptPath {
   font-weight: bold;
-  color: var(--color-dark-blue);
+  color: var(--color-indigo);
 }
 
 [data-color-mode="dark"] .promptPath {

assets/comment-icon.svg

@@ -12,17 +12,25 @@
   --color-primary-lightest: #0aa9a4;
   --color-shadow: #00000020;
   --color-red: #ca393e;
-  --color-green: #3eca39;
   --color-pink: #ca3986;
+  --color-violet: #c539ca;
+  --color-purple: #7d39ca;
+  --color-indigo: #393eca;
   --color-blue: #3986ca;
-  --color-dark-blue: #393eca;
+  --color-seagreen: #39ca7d;
+  --color-green: #3eca39;
+  --color-yellowgreen: #86ca39;
+  --color-yellow: #cac539;
+  --color-orange: #ca7d39;
   --height-navbar: 4rem;
   --margin-main-h: 2rem;
   --margin-main-v: 0;
   --margin-paragraph: 1rem;
   --font-main: "CharisSILW", Georgia, "Times New Roman", Times, serif;
   --font-code: Menlo, Consolas, Monaco, monospace;
   --border-radius-small: 0.25em;
+  --border-radius-medium: 0.5em;
+  --border-radius-large: 1em;
 
   font-family: var(--font-main);
   scroll-padding-top: var(--height-navbar);
@@ -181,6 +189,7 @@ kbd {
   margin-top: 1em;
   padding: 0 1em;
   font-weight: normal;
+  z-index: 100;
 }
 
 .term {

project-words.txt

@@ -0,0 +1,55 @@
+.chatBox {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1em;
+  overflow-y: auto;
+}
+
+.chatBox:nth-of-type(2n) {
+  background-color: #0001;
+}
+
+[data-color-mode="dark"] .chatBox:nth-of-type(2n) {
+  background-color: #fff1;
+}
+
+.profileRow {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.avatar {
+  width: 2em;
+  height: 2em;
+  border-radius: 50%;
+}
+
+.avatar[alt="JC"] {
+  background-color: white;
+}
+
+.avatar[alt="ChatGPT"] {
+  background-color: rgb(25, 195, 125);
+}
+
+.name {
+  font-weight: bold;
+}
+
+.commentButton {
+  position: absolute;
+  right: 1em;
+  top: 1em;
+  width: 1.5em;
+  height: 1.5em;
+  cursor: help;
+}
+
+.commentButton img {
+  width: 100%;
+  height: 100%;
+}

src/Layout/Command/index.module.css

@@ -0,0 +1,58 @@
+import { useId } from "react";
+import { Tooltip } from "react-tooltip";
+import styles from "./_components.module.css";
+import CommentIcon from "assets/comment-icon.svg?react";
+import avatar from "assets/avatar.svg";
+import chatGPT from "assets/chatgpt-logo.svg";
+
+const formatter = new Intl.DateTimeFormat("en-US", {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+
+export function Time({ dateTime }: { readonly dateTime: string }): JSX.Element {
+  return (
+    <time dateTime={dateTime}>{formatter.format(new Date(dateTime))}</time>
+  );
+}
+
+export function ChatBox({
+  children,
+  name,
+  comment,
+}: {
+  readonly children: React.ReactNode;
+  readonly name: string;
+  readonly comment?: string;
+}): JSX.Element {
+  const id = useId();
+  return (
+    <>
+      <section className={styles.chatBox}>
+        <div className={styles.profileRow}>
+          <img
+            alt={name}
+            className={styles.avatar}
+            src={name === "JC" ? avatar : chatGPT}
+          />
+          <span className={styles.name}>{name}</span>
+        </div>
+        {children}
+        {comment && (
+          <span data-tooltip-id={id} className={styles.commentButton}>
+            <CommentIcon />
+          </span>
+        )}
+      </section>
+      <Tooltip
+        id={id}
+        className="tooltip"
+        disableStyleInjection
+        clickable
+        place="left">
+        <p>{comment}</p>
+      </Tooltip>
+    </>
+  );
+}