feat(chat): add Chat component

jest.config.js

@@ -12,5 +12,6 @@ module.exports = {
         // make tests access in handsontable@6.22.0
         '@babel/polyfill/lib/noConflict': '<rootDir>/tests/styleMock.js',
         '^lodash-es$': 'lodash',
+        'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
     },
 };

package.json

@@ -82,6 +82,7 @@
         "@types/jest": "^29.2.3",
         "@types/lodash-es": "^4.17.12",
         "@types/react": "^18.0.0",
+        "@types/react-syntax-highlighter": "~15.5.13",
         "@types/shortid": "^0.0.31",
         "@types/showdown": "^1.9.0",
         "@types/testing-library__jest-dom": "^5.14.5",
@@ -103,6 +104,7 @@
         "react-dom": "^18.0.0",
         "react-test-renderer": "^18.2.0",
         "standard-version": "^9.5.0",
+        "resize-observer-polyfill": "^1.5.1",
         "stylelint": "^14.9.1",
         "ts-jest": "^29.0.3",
         "typescript": "~4.5.2"
@@ -115,9 +117,13 @@
         "classnames": "^2.2.6",
         "handsontable": "6.2.2",
         "highlight.js": "^10.5.0",
+        "immer": "~10.1.1",
         "lodash-es": "^4.17.21",
         "rc-drawer": "~5.1.0",
         "rc-virtual-list": "^3.4.13",
+        "react-markdown": "~8.0.6",
+        "react-syntax-highlighter": "~15.5.0",
+        "remark-gfm": "~3.0.1",
         "shortid": "^2.2.16",
         "showdown": "^1.9.0",
         "use-clippy": "^1.0.9"

src/chat/__tests__/__snapshots__/button.test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Chat Button Match the snapshot: default button 1`] = `
+<DocumentFragment>
+  <button
+    class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--default"
+    type="button"
+  >
+    <span
+      class="dtc__aigc__button__text"
+    >
+      Default
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Test Chat Button Match the snapshot: primary button 1`] = `
+<DocumentFragment>
+  <button
+    class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--primary"
+    type="button"
+  >
+    <span
+      class="dtc__aigc__button__text"
+    >
+      Default
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Test Chat Button Match the snapshot: secondary button 1`] = `
+<DocumentFragment>
+  <button
+    class="ant-btn ant-btn-default ant-btn-background-ghost dtc__aigc__button dtc__aigc__button--secondary"
+    type="button"
+  >
+    <span
+      class="dtc__aigc__button__text"
+    >
+      Default
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Test Chat Button expect ONLY one global gradient div: global gradient 1`] = `"<svg width="0" height="0"><defs><linearGradient id="secondary_linear_gradient" x1="1.18164" y1="3.93164" x2="13.9881" y2="8.54198" gradientUnits="userSpaceOnUse"><stop stop-color="#00BAC6"></stop><stop offset="0.5" stop-color="#0067FF"></stop><stop offset="1" stop-color="#450FDE"></stop></linearGradient><linearGradient id="secondary_linear_gradient_hover" x1="8.96582" y1="0.96582" x2="15.9711" y2="3.4877" gradientUnits="userSpaceOnUse"><stop stop-color="#00BAC6"></stop><stop offset="0.5" stop-color="#0067FF"></stop><stop offset="1" stop-color="#450FDE"></stop></linearGradient></defs></svg>"`;

src/chat/__tests__/__snapshots__/codeBlock.test.tsx.snap

@@ -0,0 +1,204 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Chat CodeBlock Match snapshot: normal 1`] = `
+<DocumentFragment>
+  <div
+    class="dtc__aigc__codeblock jest_test"
+    style="color: red;"
+  >
+    <div
+      class="dtc__aigc__codeblock__header"
+    >
+      <span
+        class="dtc__aigc__codeblock__language"
+      >
+        javascript
+      </span>
+      <div
+        class="dtc__aigc__codeblock__tool"
+      >
+        <span
+          class="dtc-copy"
+        >
+          <span
+            class="dtc__icon"
+          >
+            <svg
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g
+                fill="none"
+                fill-rule="evenodd"
+                stroke="none"
+                stroke-width="1"
+              >
+                <g
+                  transform="translate(-340 -367)"
+                >
+                  <g
+                    transform="translate(201 320)"
+                  >
+                    <g
+                      transform="translate(139 47)"
+                    >
+                      <path
+                        d="M11 1.5A1.5 1.5 0 0112.5 3v.25h.5a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5H5a1.5 1.5 0 01-1.5-1.5v-.25H3a1.5 1.5 0 01-1.493-1.356L1.5 11V3A1.5 1.5 0 013 1.5zm1.5 9.5a1.5 1.5 0 01-1.5 1.5H4.5v.25a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-8a.5.5 0 00-.5-.5h-.5zM11 2.5H3a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5zm-4 1a.5.5 0 01.5.5v2.5H10a.5.5 0 110 1H7.5V10a.5.5 0 11-1 0V7.5H4a.5.5 0 010-1h2.5V4a.5.5 0 01.5-.5z"
+                        fill="currentColor"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+    <pre
+      style="background: rgb(255, 255, 255); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0px; overflow: auto; border-radius: 0 0 4px 4px; max-height: 270px;"
+    >
+      <code
+        class="language-javascript"
+        style="background: rgb(255, 255, 255); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"
+      >
+        <span>
+          <span
+            class="linenumber react-syntax-highlighter-line-number"
+            style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; font-style: italic; color: rgb(160, 160, 160);"
+          >
+            1
+          </span>
+          <span
+            class="token"
+            style="color: rgb(38, 38, 38);"
+          >
+            const
+          </span>
+          <span>
+             a 
+          </span>
+          <span
+            class="token"
+            style="color: rgb(64, 64, 64);"
+          >
+            =
+          </span>
+          <span>
+
+          </span>
+          <span
+            class="token"
+            style="color: rgb(1, 1, 1);"
+          >
+            1
+          </span>
+        </span>
+      </code>
+    </pre>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Test Chat CodeBlock Match snapshot: normal 2`] = `
+<DocumentFragment>
+  <div
+    class="dtc__aigc__codeblock dtc__aigc__codeblock--convert"
+  >
+    <div
+      class="dtc__aigc__codeblock__header"
+    >
+      <span
+        class="dtc__aigc__codeblock__language"
+      >
+        javascript
+      </span>
+      <div
+        class="dtc__aigc__codeblock__tool"
+      >
+        <span
+          class="dtc-copy"
+        >
+          <span
+            class="dtc__icon"
+          >
+            <svg
+              height="1em"
+              viewBox="0 0 16 16"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g
+                fill="none"
+                fill-rule="evenodd"
+                stroke="none"
+                stroke-width="1"
+              >
+                <g
+                  transform="translate(-340 -367)"
+                >
+                  <g
+                    transform="translate(201 320)"
+                  >
+                    <g
+                      transform="translate(139 47)"
+                    >
+                      <path
+                        d="M11 1.5A1.5 1.5 0 0112.5 3v.25h.5a1.5 1.5 0 011.5 1.5v8a1.5 1.5 0 01-1.5 1.5H5a1.5 1.5 0 01-1.5-1.5v-.25H3a1.5 1.5 0 01-1.493-1.356L1.5 11V3A1.5 1.5 0 013 1.5zm1.5 9.5a1.5 1.5 0 01-1.5 1.5H4.5v.25a.5.5 0 00.5.5h8a.5.5 0 00.5-.5v-8a.5.5 0 00-.5-.5h-.5zM11 2.5H3a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5zm-4 1a.5.5 0 01.5.5v2.5H10a.5.5 0 110 1H7.5V10a.5.5 0 11-1 0V7.5H4a.5.5 0 010-1h2.5V4a.5.5 0 01.5-.5z"
+                        fill="currentColor"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+    <pre
+      style="background: rgb(249, 249, 250); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0px; overflow: auto; border-radius: 0 0 4px 4px; max-height: 270px;"
+    >
+      <code
+        class="language-javascript"
+        style="background: rgb(249, 249, 250); color: rgb(56, 56, 56); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"
+      >
+        <span>
+          <span
+            class="linenumber react-syntax-highlighter-line-number"
+            style="display: inline-block; min-width: 1.25em; padding-right: 1em; text-align: right; user-select: none; font-style: italic; color: rgb(160, 160, 160);"
+          >
+            1
+          </span>
+          <span
+            class="token"
+            style="color: rgb(38, 38, 38);"
+          >
+            const
+          </span>
+          <span>
+             a 
+          </span>
+          <span
+            class="token"
+            style="color: rgb(64, 64, 64);"
+          >
+            =
+          </span>
+          <span>
+
+          </span>
+          <span
+            class="token"
+            style="color: rgb(1, 1, 1);"
+          >
+            1
+          </span>
+        </span>
+      </code>
+    </pre>
+  </div>
+</DocumentFragment>
+`;

src/chat/__tests__/__snapshots__/content.test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Chat Content Match snapshot: normal 1`] = `
+<DocumentFragment>
+  <div
+    class="dtc__aigc__content__container dtc__aigc__content__container--valid"
+  >
+    <div
+      class="dtc__aigc__content__inner__holder"
+    >
+      <pre
+        data-testid="fakePrompt"
+      >
+        {"data":{"id":"1","createdAt":1736479532239,"title":"What is your name?","messages":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}]}}
+      </pre>
+      <div
+        data-testid="fakeMessage"
+      >
+        <pre>
+          {"prompt":{"id":"1","createdAt":1736479532239,"title":"What is your name?","messages":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}]},"data":[{"id":"1","createdAt":1736479532239,"content":"My Name is dt-react-component","status":0}],"regenerate":true}
+        </pre>
+        <button
+          data-testid="fakeOnRegenerate"
+        >
+          onRegenerate
+        </button>
+        <button
+          data-testid="fakeOnStop"
+        >
+          onStop
+        </button>
+        <button
+          data-testid="fakeOnLazyRendered"
+        >
+          onLazyRendered
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Test Chat Content Match snapshot: placeholder 1`] = `
+<DocumentFragment>
+  <div
+    class="dtc__aigc__content__container"
+  >
+    <div>
+      placeholder
+    </div>
+    <span
+      class="dtc__icon"
+      style="font-size: 200px; position: absolute; right: 0px; bottom: -100px;"
+    >
+      <svg
+        fill="none"
+        height="1em"
+        viewBox="0 0 268 265"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M210.656 14.094c0-7.266-5.89-13.156-13.156-13.156-7.266 0-13.156 5.89-13.156 13.156V27.25h-72.36c-14.532 0-26.312 11.78-26.312 26.313V237.75c0 14.532 11.78 26.313 26.312 26.313h171.032c14.532 0 26.312-11.781 26.312-26.313V53.562c0-14.531-11.78-26.312-26.312-26.312h-72.36V14.094zm72.36 39.468H111.984V237.75h171.032V53.562zm-111.828 85.516c0 10.899-8.836 19.735-19.735 19.735s-19.734-8.836-19.734-19.735 8.835-19.734 19.734-19.734c10.899 0 19.735 8.835 19.735 19.734zm-105.25-32.89c0-7.267-5.89-13.157-13.157-13.157-7.266 0-13.156 5.89-13.156 13.157v78.937c0 7.266 5.89 13.156 13.156 13.156 7.266 0 13.157-5.89 13.157-13.156v-78.937zm-52.626 13.156c7.266 0 13.157 5.89 13.157 13.156v26.313c0 7.266-5.89 13.156-13.157 13.156-7.265 0-13.156-5.89-13.156-13.156V132.5c0-7.266 5.89-13.156 13.156-13.156zM394.844 132.5c0-7.266-5.89-13.156-13.156-13.156-7.266 0-13.157 5.89-13.157 13.156v26.313c0 7.266 5.891 13.156 13.157 13.156s13.156-5.89 13.156-13.156V132.5zm-52.625-39.469c7.266 0 13.156 5.89 13.156 13.157v78.937c0 7.266-5.89 13.156-13.156 13.156-7.266 0-13.156-5.89-13.156-13.156v-78.937c0-7.267 5.89-13.157 13.156-13.157zm-98.672 65.782c10.899 0 19.734-8.836 19.734-19.735s-8.835-19.734-19.734-19.734c-10.899 0-19.734 8.835-19.734 19.734 0 10.899 8.835 19.735 19.734 19.735z"
+          fill="url(#paint0_linear_1290_3143)"
+          fill-opacity="0.03"
+          fill-rule="evenodd"
+        />
+        <defs>
+          <lineargradient
+            gradientUnits="userSpaceOnUse"
+            id="paint0_linear_1290_3143"
+            x1="0.156"
+            x2="415.745"
+            y1="0.938"
+            y2="225.356"
+          >
+            <stop
+              stop-color="#00BAC6"
+            />
+            <stop
+              offset="0.5"
+              stop-color="#0067FF"
+            />
+            <stop
+              offset="1"
+              stop-color="#450FDE"
+            />
+          </lineargradient>
+        </defs>
+      </svg>
+    </span>
+  </div>
+</DocumentFragment>
+`;