diff --git a/app/src/components/AiDraftModal/AiDraftArtifactViewer.tsx b/app/src/components/AiDraftModal/AiDraftArtifactViewer.tsx
index f7ef2465..bb3d18d2 100644
--- a/app/src/components/AiDraftModal/AiDraftArtifactViewer.tsx
+++ b/app/src/components/AiDraftModal/AiDraftArtifactViewer.tsx
@@ -52,7 +52,7 @@ export function AiDraftArtifactViewer({ globalModalId, title, path, content, tru
)}
{displayedContent || '(empty)'}
diff --git a/app/src/components/AiDraftModal/AiDraftModal.css b/app/src/components/AiDraftModal/AiDraftModal.css
index 364f3456..6889e79a 100644
--- a/app/src/components/AiDraftModal/AiDraftModal.css
+++ b/app/src/components/AiDraftModal/AiDraftModal.css
@@ -1,3 +1,5 @@
+@import '../../css/constants.css';
+
.ai-draft-modal {
display: flex;
flex-direction: column;
@@ -35,8 +37,52 @@
font-family: inherit;
}
+.ai-draft-modal .ant-tabs {
+ --ant-tabs-ink-bar-color: $linkColourPrimary;
+ --ant-tabs-item-active-color: $linkColourPrimary;
+ --ant-tabs-item-color: $textColourOnLight;
+ --ant-tabs-item-hover-color: $linkColourPrimary;
+ --ant-tabs-item-selected-color: $linkColourPrimary;
+}
+
+.ai-draft-modal .ant-tabs-content,
+.ai-draft-modal .ant-tabs-tabpane {
+ background: #fff;
+}
+
+.ai-draft-modal__columns {
+ display: grid;
+ width: 100%;
+ min-width: 0;
+}
+
+.ai-draft-modal__columns > * {
+ min-width: 0;
+}
+
+.ai-draft-modal__columns--draft {
+ grid-template-columns: minmax(0, 14fr) minmax(0, 10fr);
+ gap: 16px;
+}
+
+.ai-draft-modal__columns--settings {
+ grid-template-columns: minmax(0, 10fr) minmax(0, 14fr);
+ gap: 16px;
+}
+
+.ai-draft-modal__columns--personalities {
+ grid-template-columns: minmax(0, 9fr) minmax(0, 15fr);
+ gap: 24px;
+}
+
+@media (max-width: 767px) {
+ .ai-draft-modal__columns {
+ grid-template-columns: minmax(0, 1fr);
+ }
+}
+
.ai-draft-modal .ant-form-item-label label {
- color: #262626;
+ color: $textColourOnLight;
font-weight: 600;
}
@@ -45,6 +91,14 @@
border-color: #5f6b7a;
}
+.ai-draft-modal .ant-input:disabled,
+.ai-draft-modal .ant-input-disabled {
+ border-color: #d9d9d9 !important;
+ background-color: #fafafa !important;
+ box-shadow: none;
+ color: #8c8c8c;
+}
+
.ai-draft-modal .ant-input::-webkit-input-placeholder {
color: #c8d1dc;
opacity: 1;
@@ -110,7 +164,7 @@
}
.ai-draft-modal__select-option span {
- color: #262626;
+ color: $textColourOnLight;
font-weight: 600;
}
@@ -159,6 +213,13 @@
min-height: 32px;
}
+.ai-draft-modal__field-actions .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(:disabled):not(.ant-btn-disabled),
+.ai-draft-modal__quick-shots .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(:disabled):not(.ant-btn-disabled),
+.ai-draft-modal__artifact-actions .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(:disabled):not(.ant-btn-disabled),
+.ai-draft-modal__actions .ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):not(:disabled):not(.ant-btn-disabled) {
+ color: $textColourOnLight;
+}
+
.ai-draft-modal__quick-shots {
display: flex;
flex-wrap: wrap;
@@ -175,7 +236,7 @@
padding: 10px 12px;
border-radius: 4px;
background: #fff;
- color: #262626;
+ color: $textColourOnLight;
box-shadow: inset 0 0 0 1px rgba(31, 47, 67, 0.12), 0 2px 8px rgba(31, 47, 67, 0.06);
}
@@ -232,7 +293,7 @@
padding: 4px 6px;
border: 1px solid #e8e8e8;
background: #fff;
- color: #262626;
+ color: $textColourOnLight;
font-size: 12px;
}
@@ -265,19 +326,6 @@
min-height: 32px;
}
-.ai-draft-modal__actions .ant-btn.ai-draft-modal__action-button--generate:not([disabled]) {
- border-color: #1677c2;
- background-color: #1677c2;
- color: #fff;
-}
-
-.ai-draft-modal__actions .ant-btn.ai-draft-modal__action-button--generate:not([disabled]):hover,
-.ai-draft-modal__actions .ant-btn.ai-draft-modal__action-button--generate:not([disabled]):focus {
- border-color: #0f5f9d;
- background-color: #0f5f9d;
- color: #fff;
-}
-
.ai-draft-personalities {
padding-top: 16px;
}
@@ -344,7 +392,7 @@
border-radius: 4px;
background: #fff;
box-shadow: 0 0 0 1px rgba(31, 47, 67, 0.12), 0 2px 8px rgba(31, 47, 67, 0.08);
- color: #262626;
+ color: $textColourOnLight;
cursor: pointer;
text-align: left;
transition-property: background, box-shadow, opacity, transform;
@@ -504,7 +552,7 @@
}
.ai-draft-preview__summary h3 {
- color: #262626;
+ color: $textColourOnLight;
margin: 0 0 6px;
}
@@ -557,7 +605,7 @@
.ai-draft-preview__suggestion h4 {
margin: 0;
- color: #262626;
+ color: $textColourOnLight;
}
.ai-draft-preview__versions {
@@ -575,7 +623,7 @@
padding: 11px 12px;
border-radius: 4px;
background: #fff;
- color: #262626;
+ color: $textColourOnLight;
box-shadow: inset 0 0 0 1px rgba(31, 47, 67, 0.12), 0 2px 8px rgba(31, 47, 67, 0.08);
}
@@ -614,7 +662,7 @@
min-height: 24px;
margin-bottom: 6px;
margin-right: 0;
- color: #262626;
+ color: $textColourOnLight;
font-weight: 600;
}
diff --git a/app/src/components/AiDraftModal/AiDraftModal.tsx b/app/src/components/AiDraftModal/AiDraftModal.tsx
index b308b9cc..279b349d 100644
--- a/app/src/components/AiDraftModal/AiDraftModal.tsx
+++ b/app/src/components/AiDraftModal/AiDraftModal.tsx
@@ -2,7 +2,7 @@ import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
import { toJS } from 'mobx';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react';
-import { Alert, Button, Checkbox, Col, Form, Input, message, Radio, Row, Select, Tabs, Tag, Tooltip } from 'antd';
+import { Alert, Button, Checkbox, Form, Input, message, Radio, Select, Tabs, Tag, Tooltip } from 'antd';
import {
CodeOutlined,
CopyOutlined,
@@ -24,6 +24,7 @@ import { NodeStore } from 'stores/nodeStore/node-store';
import { AiContextPathPicker } from 'components/AiContextPathPicker';
import { AiDraftConversationTreePreview } from './AiDraftConversationTreePreview';
import { AiDraftArtifactViewer } from './AiDraftArtifactViewer';
+import { positiveActionButtonProps } from 'utils/antd-button-utils';
import {
createAiDraft,
getAiDraftArtifact,
@@ -817,6 +818,7 @@ function AiDraftModal({ globalModalId, mode, selectedNodeId }: Props) {
)}
-
-
+
+
-
-
+
+
Mode
@@ -954,8 +956,8 @@ function AiDraftModal({ globalModalId, mode, selectedNodeId }: Props) {
)}
-
-
+
+
-
+
),
key: 'settings',
@@ -1210,8 +1212,8 @@ function AiDraftModal({ globalModalId, mode, selectedNodeId }: Props) {
{
children: (
<>
-
-
+
+
-
+
{selectedPersonality == null ? (
Add a personality or restore the defaults to start.
) : (
@@ -1344,8 +1346,8 @@ function AiDraftModal({ globalModalId, mode, selectedNodeId }: Props) {
)}
-
-
+
+
),
key: 'cast-personalities',
@@ -1398,10 +1400,10 @@ function DraftPreview({
diff --git a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css
index b15f2752..c09cee46 100644
--- a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css
+++ b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.css
@@ -522,7 +522,7 @@
border: 1px solid rgba(31, 47, 67, 0.14);
border-radius: 4px;
background: #fff;
- color: #262626;
+ color: $textColourOnLight;
}
.node-renderer__logic-popover .ant-popover-arrow {
diff --git a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx
index 452031d2..972c5707 100644
--- a/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx
+++ b/app/src/components/DialogEditor/ConverseTekNodeRenderer/ConverseTekNodeRenderer.tsx
@@ -569,11 +569,10 @@ export const ConverseTekNodeRenderer = observer(
{isIsolatedCore &&
}
{hasConditions && (
@@ -581,11 +580,10 @@ export const ConverseTekNodeRenderer = observer(
)}
{hasActions && (
diff --git a/app/src/components/EditableLogic/EditableLogic.css b/app/src/components/EditableLogic/EditableLogic.css
index 3fc001c1..39f5bce0 100644
--- a/app/src/components/EditableLogic/EditableLogic.css
+++ b/app/src/components/EditableLogic/EditableLogic.css
@@ -1,6 +1,12 @@
@import '../../css/constants.css';
.editable-logic {
+ background-color: #3d3d3e;
+
+ &--even {
+ background-color: $backgroundTertiary;
+ }
+
&__logic-type,
&__arg-type {
margin-right: $tinySpace;
@@ -8,6 +14,7 @@
&__operation {
margin-left: $mediumSpace;
+ background-color: inherit;
&--even {
background-color: $backgroundTertiary;
@@ -19,6 +26,9 @@
}
&__arg {
+ display: flex;
+ align-items: center;
+ gap: $tinySpace;
margin-left: $mediumSpace;
}
@@ -43,14 +53,54 @@
}
&-label {
+ color: $textColourPrimary;
margin-right: $tinySpace;
margin-bottom: $tinySpace;
line-height: $promoLineHeightLargest;
}
}
+ .ant-select,
+ .ant-select .ant-select-selector,
+ .ant-select .ant-select-selection-item,
+ .ant-select .ant-select-selection-placeholder,
+ .ant-select .ant-select-selection-search-input,
+ .ant-select input,
+ .ant-input {
+ color: $textColourPrimary !important;
+ -webkit-text-fill-color: $textColourPrimary !important;
+ }
+
+ .ant-select.ant-select-open .ant-select-selection-item,
+ .ant-select.ant-select-focused .ant-select-selection-item,
+ .ant-select.ant-select-open .ant-select-selection-search-input,
+ .ant-select.ant-select-focused .ant-select-selection-search-input {
+ color: $textColourPrimary !important;
+ -webkit-text-fill-color: $textColourPrimary !important;
+ }
+
+ .ant-select .ant-select-selector,
+ .ant-input {
+ background-color: $backgroundTertiary !important;
+ border-color: $borderTertiary !important;
+ }
+
+ .ant-select-focused .ant-select-selector,
+ .ant-select-open .ant-select-selector,
+ .ant-input:focus,
+ .ant-input-focused {
+ background-color: $backgroundTertiary !important;
+ border-color: $linkColourPrimary !important;
+ }
+
+ &__arg > section {
+ display: inline-flex !important;
+ align-items: center;
+ vertical-align: middle;
+ }
+
.anticon {
margin-left: $smallSpace;
color: gold;
}
-}
\ No newline at end of file
+}
diff --git a/app/src/components/EditableLogic/EditableLogic.tsx b/app/src/components/EditableLogic/EditableLogic.tsx
index 098cbd32..f144b514 100644
--- a/app/src/components/EditableLogic/EditableLogic.tsx
+++ b/app/src/components/EditableLogic/EditableLogic.tsx
@@ -7,7 +7,6 @@ import { observer } from 'mobx-react';
import classnames from 'classnames';
import { Tooltip } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { SelectValue } from 'antd/lib/select';
import { useStore } from 'hooks/useStore';
import { DefStore } from 'stores/defStore/def-store';
@@ -34,6 +33,8 @@ type ValueProps = {
options: ({ text: string; value: string | number } | string)[] | null;
};
+type EditableSelectValue = string | number;
+
function getValueProps(values: InputValueType[] | undefined): ValueProps {
const valueProps: ValueProps = {
optionLabelProp: null,
@@ -71,7 +72,7 @@ function EditableLogic({ scope = 'all', category, logic, isEven = false, parentL
options={parentInput.types}
placeholder="Select a type"
style={{ width: 120 }}
- onChange={(value: SelectValue) => {
+ onChange={(value: EditableSelectValue) => {
if (typeof value === 'string' && InputTypeTypes.includes(value as InputTypeType)) {
if (parentLogic) defStore.setArgType(parentLogic, parentArg, value as InputTypeType);
}
@@ -84,7 +85,7 @@ function EditableLogic({ scope = 'all', category, logic, isEven = false, parentL
value={functionName}
options={operations}
placeholder="Select an operation"
- onChange={(value: SelectValue) => {
+ onChange={(value: EditableSelectValue) => {
if (typeof value === 'string') defStore.setOperation(logic, value);
}}
/>
@@ -135,7 +136,7 @@ function EditableLogic({ scope = 'all', category, logic, isEven = false, parentL
options={input.types}
placeholder="Select a type"
style={{ width: 120 }}
- onChange={(value: SelectValue) => {
+ onChange={(value: EditableSelectValue) => {
if (typeof value === 'string' && InputTypeTypes.includes(value as InputTypeType)) {
defStore.setArgType(logic, arg, value as InputTypeType);
}
@@ -226,7 +227,7 @@ function EditableLogic({ scope = 'all', category, logic, isEven = false, parentL
}
}
} else {
- defStore.setArgValue(logic, arg, value as number);
+ defStore.setArgValue(logic, arg, value);
}
}}
onBlur={(value) => {
@@ -275,7 +276,7 @@ function EditableLogic({ scope = 'all', category, logic, isEven = false, parentL
}
}
} else {
- defStore.setArgValue(logic, arg, value as number);
+ defStore.setArgValue(logic, arg, value);
}
}}
onBlur={(value) => {
@@ -317,6 +318,9 @@ function EditableLogic({ scope = 'all', category, logic, isEven = false, parentL
const argClasses = classnames('editable-logic__args', {
'editable-logic__args--even': isEven,
});
+ const editableLogicClasses = classnames('editable-logic', {
+ 'editable-logic--even': isEven,
+ });
// GUARD
if (!logicDef) {
@@ -328,7 +332,7 @@ function EditableLogic({ scope = 'all', category, logic, isEven = false, parentL
const argContent = renderInputsAndArgs(logicDef);
return (
-
+
{content}
{logicDef.inputs.length > 0 &&
{argContent}
}
diff --git a/app/src/components/EditableSelect/EditableSelect.tsx b/app/src/components/EditableSelect/EditableSelect.tsx
index 0edb0060..76df7e68 100644
--- a/app/src/components/EditableSelect/EditableSelect.tsx
+++ b/app/src/components/EditableSelect/EditableSelect.tsx
@@ -1,10 +1,10 @@
import React, { JSXElementConstructor, ReactElement } from 'react';
import { observer } from 'mobx-react';
import { Select } from 'antd';
-import { SelectValue } from 'antd/lib/select';
const { Option } = Select;
+type EditableSelectValue = string | number;
type SelectOptionElement = ReactElement
>;
type Props = {
@@ -12,7 +12,7 @@ type Props = {
options: string[] | { key: string }[];
placeholder: string;
style?: object;
- onChange: (value: SelectValue, option: SelectOptionElement | SelectOptionElement[]) => void;
+ onChange: (value: EditableSelectValue, option: SelectOptionElement | SelectOptionElement[]) => void;
};
function EditableSelect({ value, options, placeholder, style = {}, onChange }: Props) {
@@ -20,7 +20,13 @@ function EditableSelect({ value, options, placeholder, style = {}, onChange }: P
if (value) conditionalProps.defaultValue = value;
return (
- Type
- {capitalize(type)}
+ {capitalize(type)}
diff --git a/app/src/containers/GlobalModal/GlobalModal.tsx b/app/src/containers/GlobalModal/GlobalModal.tsx
index f8b1542e..81981d50 100644
--- a/app/src/containers/GlobalModal/GlobalModal.tsx
+++ b/app/src/containers/GlobalModal/GlobalModal.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
import { useStore } from 'hooks/useStore';
import { ModalStore } from 'stores/modalStore/modal-store';
-import { getAntdButtonType, isAntdButtonDanger } from 'utils/antd-button-utils';
+import { getAntdButtonColor, getAntdButtonType, getAntdButtonVariant, isAntdButtonDanger } from 'utils/antd-button-utils';
import './GlobalModal.css';
@@ -40,13 +40,29 @@ function GlobalModal({ id }: { id: string }) {
const footer = [
showCancelButton ? (
-