-
-
-
-
-
-
+
-
{responsePreviews}
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/TemplateHooksComponent.js b/chain-forge/src/TemplateHooksComponent.js
index 8589f47..d3f19dc 100644
--- a/chain-forge/src/TemplateHooksComponent.js
+++ b/chain-forge/src/TemplateHooksComponent.js
@@ -1,16 +1,17 @@
import React, { useCallback, useEffect, useState } from 'react';
import { Handle } from 'react-flow-renderer';
+import { Badge } from '@mantine/core';
import useStore from './store'
export default function TemplateHooks({ vars, nodeId, startY }) {
const genTemplateHooks = useCallback((temp_var_names, names_to_blink) => {
return temp_var_names.map((name, idx) => {
- const className = (names_to_blink.includes(name)) ? 'text-blink' : '';
+ const className = (names_to_blink.includes(name)) ? 'hook-tag text-blink' : 'hook-tag';
const pos = (idx * 35) + startY + 'px';
const style = { top: pos, background: '#555' };
return (
)
});
diff --git a/chain-forge/src/text-fields-node.css b/chain-forge/src/text-fields-node.css
index 9b74b7b..0694cca 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;
@@ -147,25 +152,26 @@
border-color: #aaa;
padding: 2px;
margin: 0px;
- background-color: #fff;
+ background-color: rgba(255, 255, 255, 0.4);
white-space: pre-wrap;
}
.llm-response-container {
max-width: 450px;
- background-color: #fff;
}
.llm-response-container h1 {
+ font-weight: 400;
font-size: 10pt;
- font-weight: bold;
- margin: 4px;
+ margin: 6px 8px 0px 8px;
padding-top: 2px;
- padding-bottom: 2px;
+ padding-bottom: 0px;
color: #222;
}
.response-preview-container {
- max-height: 180px;
+ margin: 10px -9px -9px -9px;
+ max-height: 100px;
overflow-y: auto;
+ background-color: #ace1aeb1; /* ACE1AF */
}
.response-box {
padding: 2px;
@@ -174,7 +180,6 @@
.response-tag {
font-size: 9pt;
color: #555;
- font-weight: 700;
margin: 0px 0px 0px 2px;
}
@@ -198,6 +203,11 @@
font-family: 'Courier New', Courier, monospace;
}
+ .hook-tag {
+ padding-top: 11px;;
+ padding-bottom: 3px;
+ }
+
.code-mirror-field-header {
font-size: 10pt;
color: #333;
@@ -214,6 +224,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;