From 560be547fb9f26644fdae8ad749ae1912e91aeff Mon Sep 17 00:00:00 2001 From: Stephanie Yang Date: Tue, 30 Jul 2024 19:12:11 -0500 Subject: [PATCH 1/4] companion mode --- package-lock.json | 235 ++++++++++- package.json | 1 + src/Chat.tsx | 30 +- src/ChatContext.ts | 1 + src/SessionMessages/SessionMessagePanel.tsx | 35 +- src/SessionMessages/SessionMessages.tsx | 2 +- src/SessionsList/SessionsList.tsx | 20 +- src/assets/file.svg | 4 +- src/theme.ts | 24 +- stories/Demos.stories.tsx | 429 ++++++++++++-------- 10 files changed, 581 insertions(+), 200 deletions(-) diff --git a/package-lock.json b/package-lock.json index 14857bc..d926454 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "reablocks": "^8.4.0", "react-markdown": "^9.0.1", "react-syntax-highlighter": "^15.5.0", + "react-use": "^17.5.1", "reakeys": "^2.0.3", "remark-gfm": "^4.0.0", "remark-youtube": "^1.3.2" @@ -3856,8 +3857,7 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "dev": true + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", @@ -5546,6 +5546,11 @@ "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==", "dev": true }, + "node_modules/@types/js-cookie": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz", + "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==" + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -6128,6 +6133,11 @@ "integrity": "sha512-aoRY0jQk3A/cuvdkodTrM4NMfxco8n55eG4H7ML/CRy7OryHfiqvug4xrCBBMbbN+dvXAetDDwZW9DXWWjBntA==", "dev": true }, + "node_modules/@xobotyi/scrollbar-width": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz", + "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==" + }, "node_modules/@yarnpkg/fslib": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@yarnpkg/fslib/-/fslib-2.10.3.tgz", @@ -7273,6 +7283,14 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "dev": true }, + "node_modules/copy-to-clipboard": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", + "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", + "dependencies": { + "toggle-selection": "^1.0.6" + } + }, "node_modules/core-js-compat": { "version": "3.37.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz", @@ -7416,6 +7434,14 @@ "postcss": "^8.4" } }, + "node_modules/css-in-js-utils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz", + "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==", + "dependencies": { + "hyphenate-style-name": "^1.0.3" + } + }, "node_modules/css-prefers-color-scheme": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-9.0.1.tgz", @@ -7438,6 +7464,18 @@ "postcss": "^8.4" } }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/cssdb": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.1.0.tgz", @@ -7869,6 +7907,14 @@ "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", "dev": true }, + "node_modules/error-stack-parser": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz", + "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==", + "dependencies": { + "stackframe": "^1.3.4" + } + }, "node_modules/es-abstract": { "version": "1.23.3", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", @@ -8814,8 +8860,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { "version": "3.3.2", @@ -8857,6 +8902,16 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "node_modules/fast-shallow-equal": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz", + "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==" + }, + "node_modules/fastest-stable-stringify": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz", + "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==" + }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -9893,6 +9948,11 @@ "url": "https://github.com/sponsors/typicode" } }, + "node_modules/hyphenate-style-name": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz", + "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==" + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -9990,6 +10050,14 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz", "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==" }, + "node_modules/inline-style-prefixer": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz", + "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==", + "dependencies": { + "css-in-js-utils": "^3.1.0" + } + }, "node_modules/internal-slot": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", @@ -10681,6 +10749,11 @@ "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==", "dev": true }, + "node_modules/js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11653,6 +11726,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -12435,6 +12513,25 @@ "resolved": "https://registry.npmjs.org/name-initials/-/name-initials-0.1.3.tgz", "integrity": "sha512-UJcpCmyftGuZ7I46dqOw776VvH3VqHhAM7ma4eyY0t52FahFv/VhmDqSeekwSZFXyK9HLg9MXmb9udeOJ3YtCA==" }, + "node_modules/nano-css": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz", + "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15", + "css-tree": "^1.1.2", + "csstype": "^3.1.2", + "fastest-stable-stringify": "^2.0.2", + "inline-style-prefixer": "^7.0.1", + "rtl-css-js": "^1.16.1", + "stacktrace-js": "^2.0.2", + "stylis": "^4.3.0" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -14578,6 +14675,40 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-universal-interface": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz", + "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==", + "peerDependencies": { + "react": "*", + "tslib": "*" + } + }, + "node_modules/react-use": { + "version": "17.5.1", + "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz", + "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==", + "dependencies": { + "@types/js-cookie": "^2.2.6", + "@xobotyi/scrollbar-width": "^1.9.5", + "copy-to-clipboard": "^3.3.1", + "fast-deep-equal": "^3.1.3", + "fast-shallow-equal": "^1.0.0", + "js-cookie": "^2.2.1", + "nano-css": "^5.6.2", + "react-universal-interface": "^0.6.2", + "resize-observer-polyfill": "^1.5.1", + "screenfull": "^5.1.0", + "set-harmonic-interval": "^1.0.1", + "throttle-debounce": "^3.0.1", + "ts-easing": "^0.2.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -14982,6 +15113,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -15142,6 +15278,14 @@ "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==", "dev": true }, + "node_modules/rtl-css-js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz", + "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==", + "dependencies": { + "@babel/runtime": "^7.1.2" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -15246,6 +15390,17 @@ "loose-envify": "^1.1.0" } }, + "node_modules/screenfull": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz", + "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==", + "engines": { + "node": ">=0.10.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -15347,6 +15502,14 @@ "node": ">= 0.4" } }, + "node_modules/set-harmonic-interval": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz", + "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==", + "engines": { + "node": ">=6.9" + } + }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -15488,7 +15651,6 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -15534,12 +15696,52 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, + "node_modules/stack-generator": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz", + "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==", + "dependencies": { + "stackframe": "^1.3.4" + } + }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==", "dev": true }, + "node_modules/stackframe": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz", + "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==" + }, + "node_modules/stacktrace-gps": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz", + "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==", + "dependencies": { + "source-map": "0.5.6", + "stackframe": "^1.3.4" + } + }, + "node_modules/stacktrace-gps/node_modules/source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/stacktrace-js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz", + "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==", + "dependencies": { + "error-stack-parser": "^2.0.6", + "stack-generator": "^2.0.5", + "stacktrace-gps": "^3.0.4" + } + }, "node_modules/statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -16113,6 +16315,11 @@ "inline-style-parser": "0.2.3" } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -16416,6 +16623,14 @@ "node": ">=0.8" } }, + "node_modules/throttle-debounce": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", + "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==", + "engines": { + "node": ">=10" + } + }, "node_modules/tiny-invariant": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", @@ -16467,6 +16682,11 @@ "node": ">=8.0" } }, + "node_modules/toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==" + }, "node_modules/toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", @@ -16551,6 +16771,11 @@ "node": ">=6.10" } }, + "node_modules/ts-easing": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz", + "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==" + }, "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", diff --git a/package.json b/package.json index 49f54a0..6588d22 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "reablocks": "^8.4.0", "react-markdown": "^9.0.1", "react-syntax-highlighter": "^15.5.0", + "react-use": "^17.5.1", "reakeys": "^2.0.3", "remark-gfm": "^4.0.0", "remark-youtube": "^1.3.2" diff --git a/src/Chat.tsx b/src/Chat.tsx index 63f02aa..e3ce706 100644 --- a/src/Chat.tsx +++ b/src/Chat.tsx @@ -13,6 +13,8 @@ import { Session } from './types'; import { ChatTheme, chatTheme } from './theme'; import { ChatContext } from './ChatContext'; import { PluggableList } from 'react-markdown/lib'; +import { useMeasure } from 'react-use'; +import { AnimatePresence } from 'framer-motion'; export interface ChatProps extends PropsWithChildren { /** @@ -97,6 +99,11 @@ export const Chat: FC = ({ const [internalActiveSessionID, setInternalActiveSessionID] = useState< string | undefined >(activeSessionId); + const [ref, { width }] = useMeasure(); + const isCompact = useMemo( + () => viewType === 'companion' || (width && width < 767), + [viewType, width] + ); useEffect(() => { setInternalActiveSessionID(activeSessionId); @@ -148,6 +155,7 @@ export const Chat: FC = ({ theme, disabled, isLoading, + isCompact, activeSessionId: internalActiveSessionID, selectSession: handleSelectSession, deleteSession: handleDeleteSession, @@ -155,6 +163,7 @@ export const Chat: FC = ({ }), [ isLoading, + isCompact, disabled, theme, remarkPlugins, @@ -169,15 +178,18 @@ export const Chat: FC = ({ return ( -
- {children} -
+ +
+ {children} +
+ ); }; diff --git a/src/ChatContext.ts b/src/ChatContext.ts index 64cb960..d77e490 100644 --- a/src/ChatContext.ts +++ b/src/ChatContext.ts @@ -9,6 +9,7 @@ export interface ChatContextProps { activeSessionId: string | null; theme?: ChatTheme; isLoading?: boolean; + isCompact?: boolean; activeSession?: Session | null; remarkPlugins?: PluggableList[]; selectSession?: (sessionId: string) => void; diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx index aa62dc9..a7cff47 100644 --- a/src/SessionMessages/SessionMessagePanel.tsx +++ b/src/SessionMessages/SessionMessagePanel.tsx @@ -1,13 +1,38 @@ import { FC, PropsWithChildren, useContext } from 'react'; -import { cn } from 'reablocks'; +import { Button, cn } from 'reablocks'; import { ChatContext } from '@/ChatContext'; +import { motion } from 'framer-motion'; export const SessionMessagePanel: FC = ({ children }) => { - const { theme } = useContext(ChatContext); + const { activeSessionId, theme, isCompact, selectSession } = + useContext(ChatContext); + const isVisible = isCompact && activeSessionId; return ( -
-
{children}
-
+ (!isCompact || isVisible) && ( + +
+ {isCompact && ( + + )} + {children} +
+ + ) ); }; diff --git a/src/SessionMessages/SessionMessages.tsx b/src/SessionMessages/SessionMessages.tsx index c2adf8c..d720d77 100644 --- a/src/SessionMessages/SessionMessages.tsx +++ b/src/SessionMessages/SessionMessages.tsx @@ -49,7 +49,7 @@ export const SessionMessages: React.FC = ({ limit = 10, showMoreText = 'Show more' }) => { - const { activeSession, theme, isLoading } = useContext(ChatContext); + const { activeSession, theme } = useContext(ChatContext); const contentRef = useRef(null); const [isAnimating, setIsAnimating] = useState(true); diff --git a/src/SessionsList/SessionsList.tsx b/src/SessionsList/SessionsList.tsx index d273ee4..bc61018 100644 --- a/src/SessionsList/SessionsList.tsx +++ b/src/SessionsList/SessionsList.tsx @@ -1,9 +1,25 @@ import { FC, PropsWithChildren, useContext } from 'react'; import { List, cn } from 'reablocks'; import { ChatContext } from '@/ChatContext'; +import { motion } from 'framer-motion'; export const SessionsList: FC = ({ children }) => { - const { theme } = useContext(ChatContext); + const { theme, isCompact, activeSessionId } = useContext(ChatContext); + const isVisible = isCompact && !activeSessionId; - return {children}; + return ( + (!isCompact || isVisible) && ( + + {children} + + ) + ); }; diff --git a/src/assets/file.svg b/src/assets/file.svg index effd5e5..191c56f 100644 --- a/src/assets/file.svg +++ b/src/assets/file.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/src/theme.ts b/src/theme.ts index 3666159..8c287e6 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -5,6 +5,8 @@ export interface ChatTheme { empty: string; sessions: { base: string; + console: string; + companion: string; create: string; group: string; session: { @@ -15,6 +17,10 @@ export interface ChatTheme { }; messages: { base: string; + console: string; + companion: string; + back: string; + inner: string; title: string; date: string; content: string; @@ -74,10 +80,12 @@ export interface ChatTheme { export const chatTheme: ChatTheme = { base: 'text-white', console: 'flex w-full gap-5 h-full', - companion: 'p-4', + companion: 'w-full h-full overflow-hidden', empty: 'text-center flex-1', sessions: { - base: 'overflow-auto min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded', + base: 'overflow-auto', + console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded', + companion: 'w-full h-full', group: 'text-xs text-gray-400 mt-4', create: 'mb-4', session: { @@ -87,7 +95,11 @@ export const chatTheme: ChatTheme = { } }, messages: { - base: 'flex flex-col flex-1 overflow-hidden', + base: '', + console: 'flex flex-col flex-1 overflow-hidden', + companion: 'flex w-full h-full', + back: 'self-start p-0 my-2', + inner: 'flex-1 h-full flex flex-col', title: 'text-2xl font-bold', date: 'text-sm whitespace-nowrap pt-2', content: 'mt-2 flex-1 overflow-auto', @@ -99,14 +111,14 @@ export const chatTheme: ChatTheme = { response: '', cursor: 'inline-block w-1 h-4 bg-current', files: { - base: 'mb-2 flex gap-3', + base: 'mb-2 flex flex-wrap gap-3 ', file: { - base: 'flex gap-2 border border-gray-700 p-2 rounded cursor-pointer', + base: 'flex items-center gap-2 border border-gray-700 p-2 rounded cursor-pointer', name: 'text-sm' } }, sources: { - base: 'my-4 flex gap-3', + base: 'my-4 flex flex-wrap gap-3', source: { base: 'flex gap-2 border border-gray-700 p-2 rounded cursor-pointer', image: 'w-6 h-6 rounded-md', diff --git a/stories/Demos.stories.tsx b/stories/Demos.stories.tsx index b74d8f8..253fb68 100644 --- a/stories/Demos.stories.tsx +++ b/stories/Demos.stories.tsx @@ -35,20 +35,14 @@ import { Input, List, ListItem, - Menu, + Menu } from 'reablocks'; import { subDays, subMinutes, subHours } from 'date-fns'; import MenuIcon from '@/assets/menu.svg?react'; -import { motion } from 'framer-motion'; import { MessageActions } from '@/SessionMessages/MessageActions'; import { MessageFiles } from '@/SessionMessages/MessageFiles'; -import { - MessageQuestion, -} from '@/SessionMessages/MessageQuestion'; -import { - MessageResponse, - MessageResponseProps -} from '@/SessionMessages/MessageResponse'; +import { MessageQuestion } from '@/SessionMessages/MessageQuestion'; +import { MessageResponse } from '@/SessionMessages/MessageResponse'; import { MessageSources } from '@/SessionMessages/MessageSources'; export default { @@ -142,7 +136,62 @@ export const Console = () => { {conversations => conversations.map(conversation => ( - + + )) + } + + + + + + ); +}; + +export const Companion = () => { + return ( +
+ alert('delete!')} + > + + + + {groups => + groups.map(({ heading, sessions }) => ( + + {sessions.map(s => ( + + ))} + + )) + } + + + + + + {conversations => + conversations.map(conversation => ( + )) } @@ -231,7 +280,10 @@ export const Embeds = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -283,7 +335,10 @@ export const DefaultSession = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -443,7 +498,10 @@ export const FileUploads = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -495,7 +553,10 @@ export const DefaultInputValue = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -542,7 +603,10 @@ export const UndeleteableSessions = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -627,7 +691,10 @@ export const SessionGrouping = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -694,7 +761,10 @@ export const HundredSessions = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -765,7 +835,10 @@ export const HundredConversations = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -828,7 +901,10 @@ export const LongSessionNames = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -957,7 +1033,10 @@ export const MarkdownShowcase = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -1044,7 +1123,10 @@ export const CVEExample = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -1201,7 +1283,10 @@ export const OpenAIIntegration = () => { {conversations => conversations.map(conversation => ( - + )) } @@ -1213,6 +1298,157 @@ export const OpenAIIntegration = () => { ); }; +export const EmptyState = () => { + return ( +
+ alert('delete!')} + > + + + + {groups => ( + <> + {groups.map(({ heading, sessions }) => ( + + {sessions.map(s => ( + + ))} + + ))} + {groups.length === 0 && ( +
+

+ No sessions yet. Start a new session! +

+
+ )} + + )} + + +
+ +

+ No messages yet. Start a new conversation! +

+
+ } + /> + +
+ +
+ ); +}; + +const sessionWithSources: Session[] = [ + { + id: 'session-sources', + title: 'Session with Sources', + createdAt: subHours(new Date(), 1), + updatedAt: new Date(), + conversations: [ + { + id: 'conversation-1', + question: 'What are the main causes of climate change?', + response: `Climate change is primarily caused by human activities that release greenhouse gases into the atmosphere. The main causes include: + +1. Burning of fossil fuels (coal, oil, and natural gas) +2. Deforestation and land-use changes +3. Industrial processes +4. Agriculture and livestock farming + +These activities increase the concentration of greenhouse gases in the atmosphere, leading to the greenhouse effect and global warming.`, + createdAt: new Date(), + updatedAt: new Date(), + sources: [ + { + title: 'NASA: Causes of Climate Change', + image: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/1224px-NASA_logo.svg.png', + url: 'https://climate.nasa.gov/causes/' + }, + { + title: + 'IPCC: Climate Change 2021: The Physical Science Basis and Global Warming Is the Last War We will Fight', + url: 'https://www.ipcc.ch/report/ar6/wg1/' + } + ] + } + ] + } +]; + +export const ConversationSources = () => { + return ( +
+ + + + + {groups => + groups.map(({ heading, sessions }) => ( + + {sessions.map(s => ( + + ))} + + )) + } + + + + + + + {conversations => + conversations.map(conversation => ( + + )) + } + + + + +
+ ); +}; const CustomMessagesHeader: FC = () => { const { activeSession } = useContext(ChatContext); @@ -1390,152 +1626,3 @@ export const CustomComponents = () => { ); }; - -export const EmptyState = () => { - return ( -
- alert('delete!')} - > - - - - {groups => ( - <> - {groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - ))} - {groups.length === 0 && ( -
-

- No sessions yet. Start a new session! -

-
- )} - - )} - - -
- -

- No messages yet. Start a new conversation! -

-
- } - /> - -
- - - ); -}; - -const sessionWithSources: Session[] = [ - { - id: 'session-sources', - title: 'Session with Sources', - createdAt: subHours(new Date(), 1), - updatedAt: new Date(), - conversations: [ - { - id: 'conversation-1', - question: 'What are the main causes of climate change?', - response: `Climate change is primarily caused by human activities that release greenhouse gases into the atmosphere. The main causes include: - -1. Burning of fossil fuels (coal, oil, and natural gas) -2. Deforestation and land-use changes -3. Industrial processes -4. Agriculture and livestock farming - -These activities increase the concentration of greenhouse gases in the atmosphere, leading to the greenhouse effect and global warming.`, - createdAt: new Date(), - updatedAt: new Date(), - sources: [ - { - title: 'NASA: Causes of Climate Change', - image: - 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/1224px-NASA_logo.svg.png', - url: 'https://climate.nasa.gov/causes/' - }, - { - title: - 'IPCC: Climate Change 2021: The Physical Science Basis and Global Warming Is the Last War We will Fight', - url: 'https://www.ipcc.ch/report/ar6/wg1/' - } - ] - } - ] - } -]; - -export const ConversationSources = () => { - return ( -
- - - - - {groups => - groups.map(({ heading, sessions }) => ( - - {sessions.map(s => ( - - ))} - - )) - } - - - - - - - {conversations => - conversations.map(conversation => ( - - )) - } - - - - -
- ); -}; From c018e98ed89a4220be7a88abb0f5e418ed45ccd6 Mon Sep 17 00:00:00 2001 From: Stephanie Yang Date: Tue, 30 Jul 2024 22:49:30 -0500 Subject: [PATCH 2/4] move react and react-dom to peer dependency --- package.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6588d22..35bec50 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,10 @@ "remark-gfm": "^4.0.0", "remark-youtube": "^1.3.2" }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, "devDependencies": { "@storybook/addon-docs": "^8.2.6", "@storybook/addon-essentials": "^8.2.6", @@ -83,9 +87,7 @@ "postcss-nested": "^6.0.1", "postcss-preset-env": "^9.5.2", "prettier": "^3.2.5", - "react": "^18.0.0", "react-docgen-typescript": "^2.2.2", - "react-dom": "^18.0.0", "react-hook-form": "^7.51.1", "rollup-plugin-peer-deps-external": "2.2.4", "storybook": "^8.2.6", From 353661a3798339eb2c9fd1dc986b5eac58b1f86a Mon Sep 17 00:00:00 2001 From: amcdnl Date: Wed, 31 Jul 2024 05:41:34 -0400 Subject: [PATCH 3/4] tweak observe lib --- package-lock.json | 298 ++++------------------------------------------ package.json | 6 +- src/Chat.tsx | 12 +- 3 files changed, 28 insertions(+), 288 deletions(-) diff --git a/package-lock.json b/package-lock.json index d926454..b2c677c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,9 +14,9 @@ "framer-motion": "^10.16.16", "mdast-util-find-and-replace": "^3.0.1", "reablocks": "^8.4.0", + "react-cool-dimensions": "^3.0.1", "react-markdown": "^9.0.1", "react-syntax-highlighter": "^15.5.0", - "react-use": "^17.5.1", "reakeys": "^2.0.3", "remark-gfm": "^4.0.0", "remark-youtube": "^1.3.2" @@ -55,16 +55,14 @@ "postcss-nested": "^6.0.1", "postcss-preset-env": "^9.5.2", "prettier": "^3.2.5", - "react": "^18.0.0", + "react": "^18.3.1", "react-docgen-typescript": "^2.2.2", - "react-dom": "^18.0.0", - "react-hook-form": "^7.51.1", + "react-dom": "^18.3.1", "rollup-plugin-peer-deps-external": "2.2.4", "storybook": "^8.2.6", "tailwindcss": "^3.4.6", "tw-colors": "^3.3.1", "typescript": "^4.9.5", - "typescript-rewrite-paths": "^1.3.1", "vite": "^5.2.2", "vite-plugin-checker": "^0.6.4", "vite-plugin-css-injected-by-js": "^3.5.0", @@ -72,6 +70,10 @@ "vite-plugin-svgr": "^4.2.0", "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.4.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" } }, "node_modules/@alloc/quick-lru": { @@ -3857,7 +3859,8 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "dev": true }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", @@ -5546,11 +5549,6 @@ "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==", "dev": true }, - "node_modules/@types/js-cookie": { - "version": "2.2.7", - "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz", - "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==" - }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -6133,11 +6131,6 @@ "integrity": "sha512-aoRY0jQk3A/cuvdkodTrM4NMfxco8n55eG4H7ML/CRy7OryHfiqvug4xrCBBMbbN+dvXAetDDwZW9DXWWjBntA==", "dev": true }, - "node_modules/@xobotyi/scrollbar-width": { - "version": "1.9.5", - "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz", - "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==" - }, "node_modules/@yarnpkg/fslib": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@yarnpkg/fslib/-/fslib-2.10.3.tgz", @@ -7283,14 +7276,6 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "dev": true }, - "node_modules/copy-to-clipboard": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", - "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", - "dependencies": { - "toggle-selection": "^1.0.6" - } - }, "node_modules/core-js-compat": { "version": "3.37.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz", @@ -7434,14 +7419,6 @@ "postcss": "^8.4" } }, - "node_modules/css-in-js-utils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz", - "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==", - "dependencies": { - "hyphenate-style-name": "^1.0.3" - } - }, "node_modules/css-prefers-color-scheme": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-9.0.1.tgz", @@ -7464,18 +7441,6 @@ "postcss": "^8.4" } }, - "node_modules/css-tree": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", - "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", - "dependencies": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" - }, - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/cssdb": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.1.0.tgz", @@ -7907,14 +7872,6 @@ "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", "dev": true }, - "node_modules/error-stack-parser": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz", - "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==", - "dependencies": { - "stackframe": "^1.3.4" - } - }, "node_modules/es-abstract": { "version": "1.23.3", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", @@ -8860,7 +8817,8 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true }, "node_modules/fast-glob": { "version": "3.3.2", @@ -8902,16 +8860,6 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, - "node_modules/fast-shallow-equal": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz", - "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==" - }, - "node_modules/fastest-stable-stringify": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz", - "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==" - }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -9948,11 +9896,6 @@ "url": "https://github.com/sponsors/typicode" } }, - "node_modules/hyphenate-style-name": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz", - "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==" - }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -10050,14 +9993,6 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz", "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==" }, - "node_modules/inline-style-prefixer": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz", - "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==", - "dependencies": { - "css-in-js-utils": "^3.1.0" - } - }, "node_modules/internal-slot": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", @@ -10749,11 +10684,6 @@ "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==", "dev": true }, - "node_modules/js-cookie": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", - "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11726,11 +11656,6 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==" - }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -12513,25 +12438,6 @@ "resolved": "https://registry.npmjs.org/name-initials/-/name-initials-0.1.3.tgz", "integrity": "sha512-UJcpCmyftGuZ7I46dqOw776VvH3VqHhAM7ma4eyY0t52FahFv/VhmDqSeekwSZFXyK9HLg9MXmb9udeOJ3YtCA==" }, - "node_modules/nano-css": { - "version": "5.6.2", - "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz", - "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==", - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15", - "css-tree": "^1.1.2", - "csstype": "^3.1.2", - "fastest-stable-stringify": "^2.0.2", - "inline-style-prefixer": "^7.0.1", - "rtl-css-js": "^1.16.1", - "stacktrace-js": "^2.0.2", - "stylis": "^4.3.0" - }, - "peerDependencies": { - "react": "*", - "react-dom": "*" - } - }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -14500,6 +14406,14 @@ "react-dom": ">=16.8.0" } }, + "node_modules/react-cool-dimensions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/react-cool-dimensions/-/react-cool-dimensions-3.0.1.tgz", + "integrity": "sha512-DUsDB5WUN1Qh6fJJlBtqFKCktrZCPRYcVn8NTeM6hP/5AhZNjDOa2sC2Dg0EM3WUObPDNV5nFLA34vHQfahUeg==", + "peerDependencies": { + "react": ">= 16.8.0" + } + }, "node_modules/react-docgen": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.0.3.tgz", @@ -14581,22 +14495,6 @@ "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, - "node_modules/react-hook-form": { - "version": "7.52.1", - "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.1.tgz", - "integrity": "sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==", - "dev": true, - "engines": { - "node": ">=12.22.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/react-hook-form" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18 || ^19" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -14675,40 +14573,6 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-universal-interface": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz", - "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==", - "peerDependencies": { - "react": "*", - "tslib": "*" - } - }, - "node_modules/react-use": { - "version": "17.5.1", - "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.5.1.tgz", - "integrity": "sha512-LG/uPEVRflLWMwi3j/sZqR00nF6JGqTTDblkXK2nzXsIvij06hXl1V/MZIlwj1OKIQUtlh1l9jK8gLsRyCQxMg==", - "dependencies": { - "@types/js-cookie": "^2.2.6", - "@xobotyi/scrollbar-width": "^1.9.5", - "copy-to-clipboard": "^3.3.1", - "fast-deep-equal": "^3.1.3", - "fast-shallow-equal": "^1.0.0", - "js-cookie": "^2.2.1", - "nano-css": "^5.6.2", - "react-universal-interface": "^0.6.2", - "resize-observer-polyfill": "^1.5.1", - "screenfull": "^5.1.0", - "set-harmonic-interval": "^1.0.1", - "throttle-debounce": "^3.0.1", - "ts-easing": "^0.2.0", - "tslib": "^2.1.0" - }, - "peerDependencies": { - "react": "*", - "react-dom": "*" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -15113,11 +14977,6 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, - "node_modules/resize-observer-polyfill": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", - "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" - }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -15278,14 +15137,6 @@ "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==", "dev": true }, - "node_modules/rtl-css-js": { - "version": "1.16.1", - "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz", - "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==", - "dependencies": { - "@babel/runtime": "^7.1.2" - } - }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -15390,17 +15241,6 @@ "loose-envify": "^1.1.0" } }, - "node_modules/screenfull": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz", - "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==", - "engines": { - "node": ">=0.10.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -15502,14 +15342,6 @@ "node": ">= 0.4" } }, - "node_modules/set-harmonic-interval": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz", - "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==", - "engines": { - "node": ">=6.9" - } - }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -15651,6 +15483,7 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -15674,13 +15507,6 @@ "source-map": "^0.6.0" } }, - "node_modules/sourcemap-codec": { - "version": "1.4.8", - "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", - "deprecated": "Please use @jridgewell/sourcemap-codec instead", - "dev": true - }, "node_modules/space-separated-tokens": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", @@ -15696,52 +15522,12 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, - "node_modules/stack-generator": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz", - "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==", - "dependencies": { - "stackframe": "^1.3.4" - } - }, "node_modules/stackback": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==", "dev": true }, - "node_modules/stackframe": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz", - "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==" - }, - "node_modules/stacktrace-gps": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz", - "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==", - "dependencies": { - "source-map": "0.5.6", - "stackframe": "^1.3.4" - } - }, - "node_modules/stacktrace-gps/node_modules/source-map": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/stacktrace-js": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz", - "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==", - "dependencies": { - "error-stack-parser": "^2.0.6", - "stack-generator": "^2.0.5", - "stacktrace-gps": "^3.0.4" - } - }, "node_modules/statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -16315,11 +16101,6 @@ "inline-style-parser": "0.2.3" } }, - "node_modules/stylis": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", - "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" - }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -16623,14 +16404,6 @@ "node": ">=0.8" } }, - "node_modules/throttle-debounce": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz", - "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==", - "engines": { - "node": ">=10" - } - }, "node_modules/tiny-invariant": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", @@ -16682,11 +16455,6 @@ "node": ">=8.0" } }, - "node_modules/toggle-selection": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", - "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==" - }, "node_modules/toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", @@ -16771,11 +16539,6 @@ "node": ">=6.10" } }, - "node_modules/ts-easing": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz", - "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==" - }, "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", @@ -16968,27 +16731,6 @@ "node": ">=4.2.0" } }, - "node_modules/typescript-rewrite-paths": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/typescript-rewrite-paths/-/typescript-rewrite-paths-1.3.1.tgz", - "integrity": "sha512-KKH4ke2P8CQsBfv5DLZk3zre2/eQDVZfi1sqUOxTCyktHSP0NhY6F5Mywnb3WRzE1ayNCAP7wiGvorsCTpYbiw==", - "dev": true, - "dependencies": { - "magic-string": "^0.25.2" - }, - "peerDependencies": { - "typescript": ">=3" - } - }, - "node_modules/typescript-rewrite-paths/node_modules/magic-string": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", - "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", - "dev": true, - "dependencies": { - "sourcemap-codec": "^1.4.8" - } - }, "node_modules/ufo": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz", diff --git a/package.json b/package.json index 35bec50..0964fba 100644 --- a/package.json +++ b/package.json @@ -42,9 +42,9 @@ "framer-motion": "^10.16.16", "mdast-util-find-and-replace": "^3.0.1", "reablocks": "^8.4.0", + "react-cool-dimensions": "^3.0.1", "react-markdown": "^9.0.1", "react-syntax-highlighter": "^15.5.0", - "react-use": "^17.5.1", "reakeys": "^2.0.3", "remark-gfm": "^4.0.0", "remark-youtube": "^1.3.2" @@ -87,14 +87,14 @@ "postcss-nested": "^6.0.1", "postcss-preset-env": "^9.5.2", "prettier": "^3.2.5", + "react": "^18.3.1", "react-docgen-typescript": "^2.2.2", - "react-hook-form": "^7.51.1", + "react-dom": "^18.3.1", "rollup-plugin-peer-deps-external": "2.2.4", "storybook": "^8.2.6", "tailwindcss": "^3.4.6", "tw-colors": "^3.3.1", "typescript": "^4.9.5", - "typescript-rewrite-paths": "^1.3.1", "vite": "^5.2.2", "vite-plugin-checker": "^0.6.4", "vite-plugin-css-injected-by-js": "^3.5.0", diff --git a/src/Chat.tsx b/src/Chat.tsx index e3ce706..41038aa 100644 --- a/src/Chat.tsx +++ b/src/Chat.tsx @@ -13,7 +13,7 @@ import { Session } from './types'; import { ChatTheme, chatTheme } from './theme'; import { ChatContext } from './ChatContext'; import { PluggableList } from 'react-markdown/lib'; -import { useMeasure } from 'react-use'; +import useDimensions from 'react-cool-dimensions'; import { AnimatePresence } from 'framer-motion'; export interface ChatProps extends PropsWithChildren { @@ -99,11 +99,9 @@ export const Chat: FC = ({ const [internalActiveSessionID, setInternalActiveSessionID] = useState< string | undefined >(activeSessionId); - const [ref, { width }] = useMeasure(); - const isCompact = useMemo( - () => viewType === 'companion' || (width && width < 767), - [viewType, width] - ); + + const { width, observe } = useDimensions(); + const isCompact = viewType === 'companion' || (width && width < 767); useEffect(() => { setInternalActiveSessionID(activeSessionId); @@ -180,7 +178,7 @@ export const Chat: FC = ({
Date: Wed, 31 Jul 2024 06:15:59 -0400 Subject: [PATCH 4/4] companion almost --- src/SessionMessages/MessageFiles.tsx | 2 +- src/SessionMessages/MessageQuestion.tsx | 2 +- src/SessionMessages/SessionMessage.tsx | 2 +- src/SessionMessages/SessionMessagePanel.tsx | 14 ++++++++++++-- src/SessionMessages/SessionMessages.tsx | 3 ++- src/SessionsList/SessionsList.tsx | 10 +++++++++- src/assets/back.svg | 1 + src/assets/menu.svg | 4 +--- stories/Demos.stories.tsx | 5 +++-- 9 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 src/assets/back.svg diff --git a/src/SessionMessages/MessageFiles.tsx b/src/SessionMessages/MessageFiles.tsx index aacd6ab..62632f8 100644 --- a/src/SessionMessages/MessageFiles.tsx +++ b/src/SessionMessages/MessageFiles.tsx @@ -1,7 +1,7 @@ import { ChatContext } from '@/ChatContext'; import { ConversationFile } from '@/types'; import { cn } from 'reablocks'; -import { FC, PropsWithChildren, ReactNode, useContext } from 'react'; +import { FC, PropsWithChildren, useContext } from 'react'; import { MessageFile } from './MessageFile'; import { Slot } from '@radix-ui/react-slot'; diff --git a/src/SessionMessages/MessageQuestion.tsx b/src/SessionMessages/MessageQuestion.tsx index 3601fef..904223d 100644 --- a/src/SessionMessages/MessageQuestion.tsx +++ b/src/SessionMessages/MessageQuestion.tsx @@ -1,7 +1,7 @@ import { ChatContext } from '@/ChatContext'; import { Slot } from '@radix-ui/react-slot'; import { cn } from 'reablocks'; -import { FC, PropsWithChildren, ReactNode, useContext } from 'react'; +import { FC, PropsWithChildren, useContext } from 'react'; import { Markdown } from '@/Markdown'; import { PluggableList } from 'react-markdown/lib'; import remarkGfm from 'remark-gfm'; diff --git a/src/SessionMessages/SessionMessage.tsx b/src/SessionMessages/SessionMessage.tsx index 7993a66..76478e5 100644 --- a/src/SessionMessages/SessionMessage.tsx +++ b/src/SessionMessages/SessionMessage.tsx @@ -22,7 +22,7 @@ const messageVariants = { opacity: 1, y: 0, transition: { - duration: 0.4 + duration: 0.3 } } }; diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx index a7cff47..2bf848f 100644 --- a/src/SessionMessages/SessionMessagePanel.tsx +++ b/src/SessionMessages/SessionMessagePanel.tsx @@ -2,6 +2,7 @@ import { FC, PropsWithChildren, useContext } from 'react'; import { Button, cn } from 'reablocks'; import { ChatContext } from '@/ChatContext'; import { motion } from 'framer-motion'; +import BackIcon from '@/assets/back.svg?react'; export const SessionMessagePanel: FC = ({ children }) => { const { activeSessionId, theme, isCompact, selectSession } = @@ -12,7 +13,15 @@ export const SessionMessagePanel: FC = ({ children }) => { (!isCompact || isVisible) && ( = ({ children }) => { onClick={() => selectSession(null)} className={cn(theme.messages.back)} > - Back + + Back )} {children} diff --git a/src/SessionMessages/SessionMessages.tsx b/src/SessionMessages/SessionMessages.tsx index d720d77..4dd5bb8 100644 --- a/src/SessionMessages/SessionMessages.tsx +++ b/src/SessionMessages/SessionMessages.tsx @@ -16,7 +16,8 @@ const containerVariants = { hidden: {}, visible: { transition: { - staggerChildren: 0.07 + staggerChildren: 0.07, + when: 'beforeChildren' } } }; diff --git a/src/SessionsList/SessionsList.tsx b/src/SessionsList/SessionsList.tsx index bc61018..496f16e 100644 --- a/src/SessionsList/SessionsList.tsx +++ b/src/SessionsList/SessionsList.tsx @@ -11,7 +11,15 @@ export const SessionsList: FC = ({ children }) => { (!isCompact || isVisible) && ( \ No newline at end of file diff --git a/src/assets/menu.svg b/src/assets/menu.svg index c1c8c17..15a0118 100644 --- a/src/assets/menu.svg +++ b/src/assets/menu.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/stories/Demos.stories.tsx b/stories/Demos.stories.tsx index 253fb68..50b3b9e 100644 --- a/stories/Demos.stories.tsx +++ b/stories/Demos.stories.tsx @@ -154,10 +154,11 @@ export const Companion = () => { return (