feat(UI-1467): add memo support in session viewer and model

src/components/organisms/deployments/sessions/viewer.tsx

@@ -340,10 +340,10 @@ export const SessionViewer = () => {
 								classIcon="fill-none group-hover:fill-none group-hover:stroke-green-800 stroke-white size-5 mb-0.5"
 								closeIcon={CircleMinusIcon}
 								openIcon={CirclePlusIcon}
-								title="Inputs"
+								title={t("inputs")}
 							>
 								<JsonView
-									className="scrollbar max-h-72 overflow-auto"
+									className="scrollbar max-h-72 overflow-auto rounded-md border border-gray-1000 !bg-transparent p-2"
 									style={githubDarkTheme}
 									value={sessionInfo.inputs}
 								/>
@@ -390,6 +390,25 @@ export const SessionViewer = () => {
 				</div>
 			</div>
 
+			{sessionInfo.memo && Object.keys(sessionInfo.memo).length ? (
+				<div className="mt-3 border-b border-gray-950 pb-3.5">
+					<Accordion
+						classChildren="border-none pt-3 pb-0"
+						classIcon="fill-none group-hover:fill-none group-hover:stroke-green-800 stroke-white size-5 mb-0.5"
+						className="max-w-[80%]"
+						closeIcon={CircleMinusIcon}
+						openIcon={CirclePlusIcon}
+						title={t("memo")}
+					>
+						<JsonView
+							className="scrollbar max-h-72 overflow-auto rounded-md border border-gray-1000 !bg-transparent p-2"
+							style={githubDarkTheme}
+							value={sessionInfo.memo}
+						/>
+					</Accordion>
+				</div>
+			) : null}
+
 			<div className="flex items-center justify-between">
 				<div className="scrollbar my-5 flex items-center gap-2 overflow-x-auto overflow-y-hidden whitespace-nowrap uppercase xl:gap-4 2xl:gap-6">
 					{sessionTabs.map((singleTab) => (

src/interfaces/models/session.interface.ts

@@ -19,6 +19,7 @@ export interface BuildRuntimeExport extends SessionEntrypoint {
 interface BaseSession {
 	createdAt: Date;
 	inputs: object;
+	memo: object;
 	sessionId: string;
 	state: number;
 	triggerName?: string;

src/locales/en/deployments/translation.json

@@ -122,6 +122,8 @@
 			"buttons": {
 				"ariaCloseEditor": "Close session log viewer"
 			},
+			"inputs": "Inputs",
+			"memo": "Memo",
 			"download": "Download Logs",
 			"copy": "Copy Logs",
 			"errorDownloadingLogs": "Error downloading logs",

src/models/session.model.ts

@@ -9,6 +9,7 @@ function convertProtoSessionBase(protoSession: ProtoSession) {
 	return {
 		createdAt: convertTimestampToDate(protoSession.createdAt),
 		inputs: parseNestedJson(protoSession.inputs as Value),
+		memo: parseNestedJson(protoSession.memo as Value),
 		sessionId: protoSession.sessionId,
 		state: protoSession.state,
 		triggerName: protoSession.memo?.trigger_name,

src/models/value.model.ts

@@ -1,7 +1,9 @@
 import { Value as ProtoValue } from "@src/autokitteh/proto/gen/ts/autokitteh/values/v1/values_pb";
 import { Value } from "@src/types/models";
 
-export const convertValue = (value?: ProtoValue): Value[string] => {
+export const convertValue = (value?: ProtoValue | string): Value[string] => {
+	if (typeof value === "string") return { string: value };
+
 	if (!value) return { nothing: undefined };
 
 	if (value.nothing) return { nothing: undefined };
@@ -58,5 +60,6 @@ export const convertValue = (value?: ProtoValue): Value[string] => {
 				flags: value.function.flags,
 			},
 		};
+
 	throw new Error("Unexpected value type");
 };

src/utilities/convertWrappedJson.utils.ts

@@ -15,7 +15,8 @@ export const parseNestedJson = (object: Value): Record<string, any> => {
 		if (!Object.prototype.hasOwnProperty.call(object, key)) continue;
 
 		const wrappedValue = object[key];
-		const value = convertValue(wrappedValue as unknown as ProtoValue);
+
+		const value = convertValue(wrappedValue as ProtoValue | string);
 
 		if (isWrappedJsonValueWithString(value)) {
 			try {