From 6105522ad1a6dae4405524744fb8758caf919586 Mon Sep 17 00:00:00 2001 From: Ian Arawjo Date: Tue, 2 May 2023 17:36:22 -0400 Subject: [PATCH] LLM list WIP --- chain-forge/package-lock.json | 234 +++++++++++++++++- chain-forge/package.json | 3 + chain-forge/src/LLMListComponent.js | 70 ++++++ chain-forge/src/ListItemComponent.js | 71 ++++++ chain-forge/src/PromptNode.js | 52 +++- chain-forge/src/SettingsButton.js | 20 ++ chain-forge/src/SettingsIcon.js | 0 chain-forge/src/StrictModeDroppable.js | 19 ++ chain-forge/src/TemperatureSliderComponent.js | 31 +++ chain-forge/src/text-fields-node.css | 28 +++ 10 files changed, 511 insertions(+), 17 deletions(-) create mode 100644 chain-forge/src/LLMListComponent.js create mode 100644 chain-forge/src/ListItemComponent.js create mode 100644 chain-forge/src/SettingsButton.js create mode 100644 chain-forge/src/SettingsIcon.js create mode 100644 chain-forge/src/StrictModeDroppable.js create mode 100644 chain-forge/src/TemperatureSliderComponent.js diff --git a/chain-forge/package-lock.json b/chain-forge/package-lock.json index aa182ea..f08c8db 100644 --- a/chain-forge/package-lock.json +++ b/chain-forge/package-lock.json @@ -14,6 +14,7 @@ "@reactflow/background": "^11.2.0", "@reactflow/controls": "^11.1.11", "@reactflow/core": "^11.7.0", + "@tabler/icons-react": "^2.17.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -31,11 +32,13 @@ "plotly.js": "^2.21.0", "react": "^18.2.0", "react-ace": "^10.1.0", + "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "react-edit-text": "^5.1.0", "react-flow-renderer": "^10.3.17", "react-plotly.js": "^2.6.0", "react-scripts": "5.0.1", + "styled-components": "^5.3.10", "web-vitals": "^2.1.4", "zustand": "^4.3.7" } @@ -2328,11 +2331,18 @@ "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==", "peer": true }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, "node_modules/@emotion/memoize": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", - "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==", - "peer": true + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" }, "node_modules/@emotion/react": { "version": "11.10.8", @@ -2377,6 +2387,11 @@ "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==", "peer": true }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "node_modules/@emotion/unitless": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", @@ -4115,6 +4130,31 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@tabler/icons": { + "version": "2.17.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.17.0.tgz", + "integrity": "sha512-UeJaylOGNRhQKyDlgZfrQ3UPSGlfVQuXcmCsTYeXioKKepibW6VZ3H36Lo1jvBTBkQD2e9m+k2NxwkztOTXwrA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + } + }, + "node_modules/@tabler/icons-react": { + "version": "2.17.0", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.17.0.tgz", + "integrity": "sha512-kuEW+qNwRqcK5iMl7qTapzX2NiMOwPg4Az01d+IZ1DIMwaZ7iKPJaIor2ihKFLPYrT9D5BZHXB8R5mSkw0FETg==", + "dependencies": { + "@tabler/icons": "2.17.0", + "prop-types": "^15.7.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@testing-library/dom": { "version": "9.2.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz", @@ -4826,6 +4866,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -5164,6 +5213,17 @@ "@types/react": "*" } }, + "node_modules/@types/react-redux": { + "version": "7.1.25", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz", + "integrity": "sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "node_modules/@types/resize-observer-browser": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz", @@ -6446,6 +6506,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz", + "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.21", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -6815,6 +6895,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -7446,6 +7534,22 @@ "postcss": "^8.4" } }, + "node_modules/css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "dependencies": { + "tiny-invariant": "^1.0.6" + } + }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz", @@ -7673,6 +7777,16 @@ "resolved": "https://registry.npmjs.org/css-system-font-keywords/-/css-system-font-keywords-1.0.0.tgz", "integrity": "sha512-1umTtVd/fXS25ftfjB71eASCrYhilmEsvDEI6wG/QplnmlfmVM5HkZ/ZX46DT5K3eblFPgLUHt5BRCb0YXkSFA==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -10902,7 +11016,6 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "peer": true, "dependencies": { "react-is": "^16.7.0" } @@ -10910,8 +11023,7 @@ "node_modules/hoist-non-react-statics/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "peer": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/hoopy": { "version": "0.1.4", @@ -14339,6 +14451,11 @@ "node": ">= 4.0.0" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -16814,6 +16931,11 @@ "performance-now": "^2.1.0" } }, + "node_modules/raf-schd": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==" + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -16912,6 +17034,24 @@ "node": ">=14" } }, + "node_modules/react-beautiful-dnd": { + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", + "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==", + "dependencies": { + "@babel/runtime": "^7.9.2", + "css-box-model": "^1.2.0", + "memoize-one": "^5.1.1", + "raf-schd": "^4.0.2", + "react-redux": "^7.2.0", + "redux": "^4.0.4", + "use-memo-one": "^1.1.1" + }, + "peerDependencies": { + "react": "^16.8.5 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -17118,6 +17258,30 @@ "react": ">0.13.0" } }, + "node_modules/react-redux": { + "version": "7.2.9", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", + "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/react-redux": "^7.1.20", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + }, + "peerDependencies": { + "react": "^16.8.3 || ^17 || ^18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -17336,6 +17500,14 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -18092,6 +18264,11 @@ "resolved": "https://registry.npmjs.org/shallow-copy/-/shallow-copy-0.0.1.tgz", "integrity": "sha512-b6i4ZpVuUxB9h5gfCxPiusKYkqTMOjEbBs4wMaFbkfia4yFv92UKZ6Df8WXcKbn08JNL/abvg3FnMAOfakDvUw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -18653,6 +18830,40 @@ "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.2.tgz", "integrity": "sha512-C4myMmRTO8iaC5Gg+N1ftK2WT4eXUTMAa+HEFPPrfVeO/NtqLTtAmV1HbqnuGtLwCek44Ra76fdGUkSqjiMPcQ==" }, + "node_modules/styled-components": { + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.10.tgz", + "integrity": "sha512-3kSzSBN0TiCnGJM04UwO1HklIQQSXW7rCARUk+VyMR7clz8XVlA3jijtf5ypqoDIdNMKx3la4VvaPFR855SFcg==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -19167,6 +19378,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-invariant": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", + "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" + }, "node_modules/tinycolor2": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", @@ -19654,6 +19870,14 @@ } } }, + "node_modules/use-memo-one": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", + "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", diff --git a/chain-forge/package.json b/chain-forge/package.json index c6a8d39..2fa5c9b 100644 --- a/chain-forge/package.json +++ b/chain-forge/package.json @@ -9,6 +9,7 @@ "@reactflow/background": "^11.2.0", "@reactflow/controls": "^11.1.11", "@reactflow/core": "^11.7.0", + "@tabler/icons-react": "^2.17.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -26,11 +27,13 @@ "plotly.js": "^2.21.0", "react": "^18.2.0", "react-ace": "^10.1.0", + "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "react-edit-text": "^5.1.0", "react-flow-renderer": "^10.3.17", "react-plotly.js": "^2.6.0", "react-scripts": "5.0.1", + "styled-components": "^5.3.10", "web-vitals": "^2.1.4", "zustand": "^4.3.7" }, diff --git a/chain-forge/src/LLMListComponent.js b/chain-forge/src/LLMListComponent.js new file mode 100644 index 0000000..3b825c1 --- /dev/null +++ b/chain-forge/src/LLMListComponent.js @@ -0,0 +1,70 @@ +import { useState } from "react"; +import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; +import ListItem, { DragItem, ListItemClone } from "./ListItemComponent"; +import { StrictModeDroppable } from './StrictModeDroppable' + +const llmItems = [ + { model: "🙂 GPT3.5", temp: 1.0 }, + { model: "🥵 GPT4", temp: 1.0 }, + { model: "🦙 Alpaca 7B", temp: 0.5 }, + { model: "📚 Claude v1", temp: 0.5 } +]; + +export default function LLMList() { + const [items, setItems] = useState(llmItems); + + const onDragEnd = (result) => { + const { destination, source } = result; + if (!destination) return; + if ( + destination.droppableId === source.droppableId && + destination.index === source.index + ) { + return; + } + const newItems = Array.from(items); + const [removed] = newItems.splice(result.source.index, 1); + newItems.splice(result.destination.index, 0, removed); + setItems(newItems); + }; + + return ( +
+ + ( + // + + // + )} + > + {(provided) => ( +
+ {items.map((item, index) => ( + + {(provided, snapshot) => ( + + )} + + ))} + {provided.placeholder} +
+ )} + + +
+ ); +} diff --git a/chain-forge/src/ListItemComponent.js b/chain-forge/src/ListItemComponent.js new file mode 100644 index 0000000..ad18b06 --- /dev/null +++ b/chain-forge/src/ListItemComponent.js @@ -0,0 +1,71 @@ +/** Thanks to Kabir Haruna: https://codesandbox.io/s/i0rxsj */ +import React from "react"; +import styled from "styled-components"; +import SettingsButton from "./SettingsButton" + +const CardHeader = styled.div` + font-weight: 500; + font-size: 10pt; + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + text-align: start; + float: left; + margin-top: 1px; +`; + +const Author = styled.div` + display: flex; + align-items: center; +`; + +const CardFooter = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const DragItem = styled.div` + padding: 10px; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + background: white; + margin: 0 0 8px 0; + display: grid; + grid-gap: 20px; + flex-direction: column; +`; + +const ListItem = ({ item, provided, snapshot }) => { + return ( + +
+ {item.model} + +
+ + + ); +}; + +export const ListItemClone = ({ item, provided, snapshot }) => { + return ( + +
+ {item.model} + +
+ + ); +}; + +export default ListItem; \ No newline at end of file diff --git a/chain-forge/src/PromptNode.js b/chain-forge/src/PromptNode.js index d6b23d3..6d2cefc 100644 --- a/chain-forge/src/PromptNode.js +++ b/chain-forge/src/PromptNode.js @@ -4,6 +4,7 @@ import useStore from './store'; import StatusIndicator from './StatusIndicatorComponent' import NodeLabel from './NodeLabelComponent' import TemplateHooks from './TemplateHooksComponent' +import LLMList from './LLMListComponent' // Helper funcs const truncStr = (s, maxLen) => { @@ -251,6 +252,27 @@ const PromptNode = ({ data, id }) => { ? '1px solid #222' : '1px solid #999'; + const llm_list_data = [ + { + "position": 6, + "mass": 12.011, + "symbol": "C", + "name": "Carbon" + }, + { + "position": 7, + "mass": 14.007, + "symbol": "N", + "name": "Nitrogen" + }, + { + "position": 39, + "mass": 88.906, + "symbol": "Y", + "name": "Yttrium" + } + ]; + return (
{
-
-
+
-
-

LLMs:

-
- - - - - - +
+
+ Models to query: +
+ +
+
+ +
+ + {/* + + + + + */} +
-
{responsePreviews}
diff --git a/chain-forge/src/SettingsButton.js b/chain-forge/src/SettingsButton.js new file mode 100644 index 0000000..7cc2ec9 --- /dev/null +++ b/chain-forge/src/SettingsButton.js @@ -0,0 +1,20 @@ +import { useDisclosure } from '@mantine/hooks'; +import { Modal, Button, Group } from '@mantine/core'; +import { IconSettings, IconTrash } from '@tabler/icons-react'; + +export default function SettingsButton() { + const [opened, { open, close }] = useDisclosure(false); + + return ( +
+ + {/* Modal content */} + + + + + + +
+ ); +} \ No newline at end of file diff --git a/chain-forge/src/SettingsIcon.js b/chain-forge/src/SettingsIcon.js new file mode 100644 index 0000000..e69de29 diff --git a/chain-forge/src/StrictModeDroppable.js b/chain-forge/src/StrictModeDroppable.js new file mode 100644 index 0000000..6e52970 --- /dev/null +++ b/chain-forge/src/StrictModeDroppable.js @@ -0,0 +1,19 @@ +// StrictModeDroppable.tsx +// Credits to https://github.com/GiovanniACamacho and https://github.com/Meligy for the TypeScript version +// Original post: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194 +import { useEffect, useState } from "react"; +import { Droppable } from "react-beautiful-dnd"; +export const StrictModeDroppable = ({ children, ...props }) => { + const [enabled, setEnabled] = useState(false); + useEffect(() => { + const animation = requestAnimationFrame(() => setEnabled(true)); + return () => { + cancelAnimationFrame(animation); + setEnabled(false); + }; + }, []); + if (!enabled) { + return null; + } + return {children}; +}; \ No newline at end of file diff --git a/chain-forge/src/TemperatureSliderComponent.js b/chain-forge/src/TemperatureSliderComponent.js new file mode 100644 index 0000000..eecd6fe --- /dev/null +++ b/chain-forge/src/TemperatureSliderComponent.js @@ -0,0 +1,31 @@ +import { Slider, RangeSlider } from '@mantine/core'; +import { IconTemperature, IconTemperatureOff } from '@tabler/icons-react'; + +const styles = { thumb: { borderWidth: 2, height: 24, width: 24, padding: 3 } }; + +export default function TemperatureSlider({style}) { + return ( +
+ } + color="red" + label={null} + defaultValue={40} + styles={styles} + onPointerDown={e => {e.preventDefault();}} + /> + + {/* , + , + ]} + /> */} +
+ ); +} \ No newline at end of file diff --git a/chain-forge/src/text-fields-node.css b/chain-forge/src/text-fields-node.css index 9b74b7b..4a6fce6 100644 --- a/chain-forge/src/text-fields-node.css +++ b/chain-forge/src/text-fields-node.css @@ -5,6 +5,11 @@ border-radius: 5px; } + .small-standard-font { + font-size: 10pt; + font-family: -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + } + .status-icon { display: inline-block; font-size: 14pt; @@ -214,6 +219,29 @@ justify-content: center; } + .add-llm-model-btn { + display: flex; + align-items: right; + justify-content: right; + float: right; + height: 20px; + } + .add-llm-model-btn button { + border-style: solid; + border-color: #777; + border-width: 1pt; + border-radius: 3px; + color: #777; + margin-right: 2px; + } + .add-llm-model-btn:hover button { + background-color: white; + } + .add-llm-model-btn:active button { + background-color: black; + color: white; + } + /** CSS Button style from https://css-buttons-hover.netlify.app/ */ .AmitSahoo45-button-3 { position: relative;