From 1f93da566c538ee0c7288b7f83a124686227a589 Mon Sep 17 00:00:00 2001
From: mikbry <mik@miklabs.com>
Date: Thu, 29 Feb 2024 10:46:51 +0100
Subject: [PATCH 1/6] feat: refactor prompt commands management

---
 webapp/components/views/Threads/Prompt.tsx    |  4 +-
 .../views/Threads/PromptCommandInput.tsx      | 15 ++--
 webapp/components/views/Threads/Thread.tsx    | 21 +-----
 .../promptCommand.ts => commands/Command.ts}  | 10 ++-
 webapp/utils/commands/index.ts                | 71 +++++++++++++++++++
 webapp/utils/parsers/index.ts                 |  2 +-
 webapp/utils/parsers/validator.ts             |  4 +-
 7 files changed, 97 insertions(+), 30 deletions(-)
 rename webapp/utils/{parsers/promptCommand.ts => commands/Command.ts} (79%)
 create mode 100644 webapp/utils/commands/index.ts

diff --git a/webapp/components/views/Threads/Prompt.tsx b/webapp/components/views/Threads/Prompt.tsx
index 7857a4aa..675e767d 100644
--- a/webapp/components/views/Threads/Prompt.tsx
+++ b/webapp/components/views/Threads/Prompt.tsx
@@ -21,7 +21,7 @@ import { KeyBinding, ShortcutIds, defaultShortcuts } from '@/hooks/useShortcuts'
 import logger from '@/utils/logger';
 import { ParsedPrompt, TokenValidator, parsePrompt } from '@/utils/parsers';
 import { getCaretPosition } from '@/utils/caretposition';
-import { Ui } from '@/types';
+import { Command } from '@/utils/commands/Command';
 import { Button } from '../../ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
 import { ShortcutBadge } from '../../common/ShortCut';
@@ -30,7 +30,7 @@ import PromptCommandInput from './PromptCommandInput';
 export type PromptProps = {
   conversationId: string;
   prompt: ParsedPrompt;
-  commands: Ui.MenuItem[];
+  commands: Command[];
   isLoading: boolean;
   errorMessage: string;
   disabled: boolean;
diff --git a/webapp/components/views/Threads/PromptCommandInput.tsx b/webapp/components/views/Threads/PromptCommandInput.tsx
index f2936c6e..94fe4d48 100644
--- a/webapp/components/views/Threads/PromptCommandInput.tsx
+++ b/webapp/components/views/Threads/PromptCommandInput.tsx
@@ -17,20 +17,20 @@
 
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isCommand, ParsedPrompt, parsePrompt, TokenValidator } from '@/utils/parsers';
-import { PromptCommand } from '@/utils/parsers/promptCommand';
+import { Command } from '@/utils/commands/Command';
 import { getCaretCoordinates, getCurrentWord } from '@/utils/caretposition';
 import { cn } from '@/lib/utils';
 import logger from '@/utils/logger';
 import useTranslation from '@/hooks/useTranslation';
 import { getTokenColor } from '@/utils/ui';
+import { getCommandType } from '@/utils/commands';
 import { Textarea } from '../../ui/textarea';
 import { Button } from '../../ui/button';
 
 type PromptCommandProps = {
   value?: ParsedPrompt;
   placeholder?: string;
-  notFound?: string;
-  commands: PromptCommand[];
+  commands: Command[];
   onChange?: (parsedPrompt: ParsedPrompt) => void;
   onKeyDown: (event: KeyboardEvent) => void;
   className?: string;
@@ -42,7 +42,6 @@ type PromptCommandProps = {
 function PromptCommandInput({
   value,
   placeholder,
-  notFound = 'No command found.',
   commands,
   className,
   onChange,
@@ -201,6 +200,8 @@ function PromptCommandInput({
       ),
     [commands, commandValue],
   );
+  const commandType = getCommandType(commandValue);
+  const notFound = commandType ? `No ${commandType}s found.` : '';
   return (
     <div className="h-full w-full overflow-visible">
       <Textarea
@@ -235,7 +236,11 @@ function PromptCommandInput({
         )}
       >
         <div className="gap-2">
-          {filteredCommands.length === 0 && <div>{t(notFound)}</div>}
+          {filteredCommands.length === 0 && (
+            <div className="rounded-sm px-2 py-1.5 text-left text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
+              {t(notFound)}
+            </div>
+          )}
           {filteredCommands.length > 0 &&
             filteredCommands.map((item) => (
               <Button
diff --git a/webapp/components/views/Threads/Thread.tsx b/webapp/components/views/Threads/Thread.tsx
index a49e822f..c23ec6bd 100644
--- a/webapp/components/views/Threads/Thread.tsx
+++ b/webapp/components/views/Threads/Thread.tsx
@@ -28,7 +28,6 @@ import {
   PromptTemplate,
   Provider,
   ProviderType,
-  Ui,
 } from '@/types';
 import useTranslation from '@/hooks/useTranslation';
 import logger from '@/utils/logger';
@@ -59,13 +58,13 @@ import {
   PromptTokenType,
   compareMentions,
   comparePrompts,
-  getMentionName,
   parsePrompt,
   toPrompt,
 } from '@/utils/parsers';
 import { getConversationTitle } from '@/utils/conversations';
 import validator from '@/utils/parsers/validator';
 import { createMessage, changeMessageContent, mergeMessages } from '@/utils/data/messages';
+import { getCommands } from '@/utils/commands';
 import PromptArea from './Prompt';
 import PromptsGrid from './PromptsGrid';
 import ThreadMenu from './ThreadMenu';
@@ -167,23 +166,7 @@ function Thread({
 
   const { modelItems, commands } = useMemo(() => {
     const items = getModelsAsItems(providers, backendContext, selectedModel);
-    const parameterItems: Ui.MenuItem[] = [
-      { value: '#provider_key', label: 'Provider key', group: 'parameters-string' },
-      { value: '#stream', label: 'Stream', group: 'parameters-boolean' },
-    ];
-    const actionsItems: Ui.MenuItem[] = [{ value: '/system', label: 'System', group: 'actions' }];
-    const cmds = [
-      ...items
-        .filter((item) => !item.selected)
-        .map((item) => ({
-          ...item,
-          value: getMentionName(item.value as string),
-          group: 'models',
-        })),
-      ...parameterItems,
-      ...actionsItems,
-    ];
-
+    const cmds = getCommands(items);
     return { modelItems: items, commands: cmds };
   }, [backendContext, providers, selectedModel]);
 
diff --git a/webapp/utils/parsers/promptCommand.ts b/webapp/utils/commands/Command.ts
similarity index 79%
rename from webapp/utils/parsers/promptCommand.ts
rename to webapp/utils/commands/Command.ts
index 9e635290..b4c3b458 100644
--- a/webapp/utils/parsers/promptCommand.ts
+++ b/webapp/utils/commands/Command.ts
@@ -14,4 +14,12 @@
 
 import { Ui } from '@/types';
 
-export type PromptCommand = Ui.MenuItem;
+export enum CommandType {
+  Action = 'action',
+  Parameter = 'parameter',
+  Mention = 'mention',
+}
+
+export type Command = Ui.MenuItem & {
+  type: CommandType;
+};
diff --git a/webapp/utils/commands/index.ts b/webapp/utils/commands/index.ts
new file mode 100644
index 00000000..52d57fa8
--- /dev/null
+++ b/webapp/utils/commands/index.ts
@@ -0,0 +1,71 @@
+// Copyright 2024 mik
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { getMentionName } from '../parsers';
+import { Command, CommandType } from './Command';
+
+const actionsItems: Command[] = [
+  { value: '/system', label: 'System', group: 'actions', type: CommandType.Action },
+];
+const parameterItems: Command[] = [
+  {
+    value: '#provider_key',
+    label: 'Provider key',
+    group: 'parameters-string',
+    type: CommandType.Parameter,
+  },
+  { value: '#stream', label: 'Stream', group: 'parameters-boolean', type: CommandType.Parameter },
+];
+
+export const getActionCommands = (): Command[] => {
+  const actions = actionsItems.map((item) => item);
+  return actions;
+};
+
+export const getHashtagCommands = (): Command[] => {
+  const parameters = parameterItems.map((item) => item);
+  return parameters;
+};
+
+export const getCommands = (mentionItems: Partial<Command>[]): Command[] => {
+  const commands = [
+    ...mentionItems
+      .filter((item) => !item.selected)
+      .map(
+        (item) =>
+          ({
+            ...item,
+            value: getMentionName(item.value as string),
+            group: 'models',
+            type: CommandType.Mention,
+          }) as Command,
+      ),
+    ...getHashtagCommands(),
+    ...getActionCommands(),
+  ];
+  return commands;
+};
+
+export const getCommandType = (value: string): CommandType | undefined => {
+  if (value.startsWith('/')) {
+    return CommandType.Action;
+  }
+  if (value.startsWith('#')) {
+    return CommandType.Parameter;
+  }
+  if (value.startsWith('@')) {
+    return CommandType.Mention;
+  }
+  return undefined;
+};
diff --git a/webapp/utils/parsers/index.ts b/webapp/utils/parsers/index.ts
index 428bafff..dd39a37b 100644
--- a/webapp/utils/parsers/index.ts
+++ b/webapp/utils/parsers/index.ts
@@ -64,7 +64,7 @@ export type TokenValidator = (
 
 export const isHashtag = (word: string) => word.startsWith('#');
 export const isMention = (word: string) => word.startsWith('@');
-export const isAction = (word: string, start: number) => start === 0 && word.startsWith('/');
+export const isAction = (word: string, start = 0) => start === 0 && word.startsWith('/');
 export const isCommand = (word: string, start: number) =>
   isAction(word, start) || isMention(word) || isHashtag(word);
 
diff --git a/webapp/utils/parsers/validator.ts b/webapp/utils/parsers/validator.ts
index b2f4c478..192e80b3 100644
--- a/webapp/utils/parsers/validator.ts
+++ b/webapp/utils/parsers/validator.ts
@@ -22,10 +22,10 @@ import {
   compareHashtags,
   compareMentions,
 } from '.';
-import { PromptCommand } from './promptCommand';
+import { Command } from '../commands/Command';
 
 const validator = (
-  commands: PromptCommand[],
+  commands: Command[],
   token: PromptToken,
   parsedPrompt: ParsedPrompt,
   _previousToken: PromptToken | undefined,

From 2efb5d9cc6e26f6ff66255c0c556d8d0c2ef3035 Mon Sep 17 00:00:00 2001
From: mikbry <mik@miklabs.com>
Date: Thu, 29 Feb 2024 12:26:46 +0100
Subject: [PATCH 2/6] feat: add CommandManager

---
 webapp/components/views/Threads/Prompt.tsx    |  8 +--
 .../views/Threads/PromptCommandInput.tsx      | 13 ++--
 webapp/components/views/Threads/Thread.tsx    | 14 ++---
 webapp/utils/commands/index.ts                | 60 +++++++++++++------
 .../utils/commands/{Command.ts => types.ts}   |  9 +++
 webapp/utils/parsers/index.ts                 |  1 +
 webapp/utils/parsers/validator.ts             | 26 ++++----
 7 files changed, 79 insertions(+), 52 deletions(-)
 rename webapp/utils/commands/{Command.ts => types.ts} (71%)

diff --git a/webapp/components/views/Threads/Prompt.tsx b/webapp/components/views/Threads/Prompt.tsx
index 675e767d..deaa8e83 100644
--- a/webapp/components/views/Threads/Prompt.tsx
+++ b/webapp/components/views/Threads/Prompt.tsx
@@ -21,7 +21,7 @@ import { KeyBinding, ShortcutIds, defaultShortcuts } from '@/hooks/useShortcuts'
 import logger from '@/utils/logger';
 import { ParsedPrompt, TokenValidator, parsePrompt } from '@/utils/parsers';
 import { getCaretPosition } from '@/utils/caretposition';
-import { Command } from '@/utils/commands/Command';
+import { CommandManager } from '@/utils/commands/types';
 import { Button } from '../../ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
 import { ShortcutBadge } from '../../common/ShortCut';
@@ -30,7 +30,7 @@ import PromptCommandInput from './PromptCommandInput';
 export type PromptProps = {
   conversationId: string;
   prompt: ParsedPrompt;
-  commands: Command[];
+  commandManager: CommandManager;
   isLoading: boolean;
   errorMessage: string;
   disabled: boolean;
@@ -43,7 +43,7 @@ export type PromptProps = {
 export default function Prompt({
   conversationId,
   prompt,
-  commands,
+  commandManager,
   errorMessage,
   disabled,
   onUpdatePrompt,
@@ -119,7 +119,7 @@ export default function Prompt({
           </Button>
           <PromptCommandInput
             value={prompt}
-            commands={commands}
+            commandManager={commandManager}
             placeholder={t('Send a message...')}
             className="m-0 max-h-[240px] min-h-[36px] "
             onChange={handleUpdateMessage}
diff --git a/webapp/components/views/Threads/PromptCommandInput.tsx b/webapp/components/views/Threads/PromptCommandInput.tsx
index 94fe4d48..f20d1dce 100644
--- a/webapp/components/views/Threads/PromptCommandInput.tsx
+++ b/webapp/components/views/Threads/PromptCommandInput.tsx
@@ -17,7 +17,7 @@
 
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isCommand, ParsedPrompt, parsePrompt, TokenValidator } from '@/utils/parsers';
-import { Command } from '@/utils/commands/Command';
+import { CommandManager } from '@/utils/commands/types';
 import { getCaretCoordinates, getCurrentWord } from '@/utils/caretposition';
 import { cn } from '@/lib/utils';
 import logger from '@/utils/logger';
@@ -30,7 +30,7 @@ import { Button } from '../../ui/button';
 type PromptCommandProps = {
   value?: ParsedPrompt;
   placeholder?: string;
-  commands: Command[];
+  commandManager: CommandManager;
   onChange?: (parsedPrompt: ParsedPrompt) => void;
   onKeyDown: (event: KeyboardEvent) => void;
   className?: string;
@@ -42,7 +42,7 @@ type PromptCommandProps = {
 function PromptCommandInput({
   value,
   placeholder,
-  commands,
+  commandManager,
   className,
   onChange,
   onFocus,
@@ -194,11 +194,8 @@ function PromptCommandInput({
   }, [handleBlur, handleKeyDown, handleMouseDown, handleSelectionChange]);
 
   const filteredCommands = useMemo(
-    () =>
-      commands.filter(
-        (c) => !(!c.value || c.value?.toLowerCase().indexOf(commandValue.toLowerCase()) === -1),
-      ),
-    [commands, commandValue],
+    () => commandManager.filterCommands(commandValue),
+    [commandManager, commandValue],
   );
   const commandType = getCommandType(commandValue);
   const notFound = commandType ? `No ${commandType}s found.` : '';
diff --git a/webapp/components/views/Threads/Thread.tsx b/webapp/components/views/Threads/Thread.tsx
index c23ec6bd..a29604ac 100644
--- a/webapp/components/views/Threads/Thread.tsx
+++ b/webapp/components/views/Threads/Thread.tsx
@@ -64,7 +64,7 @@ import {
 import { getConversationTitle } from '@/utils/conversations';
 import validator from '@/utils/parsers/validator';
 import { createMessage, changeMessageContent, mergeMessages } from '@/utils/data/messages';
-import { getCommands } from '@/utils/commands';
+import { getCommandManager } from '@/utils/commands';
 import PromptArea from './Prompt';
 import PromptsGrid from './PromptsGrid';
 import ThreadMenu from './ThreadMenu';
@@ -164,10 +164,10 @@ function Thread({
   const showEmptyChat = !conversationId;
   const selectedModel = selectedConversation?.model || activeModel;
 
-  const { modelItems, commands } = useMemo(() => {
+  const { modelItems, commandManager } = useMemo(() => {
     const items = getModelsAsItems(providers, backendContext, selectedModel);
-    const cmds = getCommands(items);
-    return { modelItems: items, commands: cmds };
+    const manager = getCommandManager(items);
+    return { modelItems: items, commandManager: manager };
   }, [backendContext, providers, selectedModel]);
 
   useEffect(() => {
@@ -191,8 +191,8 @@ function Thread({
       parsedPrompt: ParsedPrompt,
       _previousToken: PromptToken | undefined,
     ): [PromptToken, PromptToken | undefined] =>
-      validator(commands, token, parsedPrompt, _previousToken),
-    [commands],
+      validator(commandManager, token, parsedPrompt, _previousToken),
+    [commandManager],
   );
 
   const currentPrompt = useMemo(
@@ -700,7 +700,7 @@ function Thread({
         <PromptArea
           conversationId={conversationId as string}
           disabled={disabled}
-          commands={commands}
+          commandManager={commandManager}
           prompt={prompt}
           isLoading={conversationId ? isProcessing[conversationId] : false}
           errorMessage={conversationId ? errorMessage[conversationId] : ''}
diff --git a/webapp/utils/commands/index.ts b/webapp/utils/commands/index.ts
index 52d57fa8..cc803f1e 100644
--- a/webapp/utils/commands/index.ts
+++ b/webapp/utils/commands/index.ts
@@ -13,10 +13,16 @@
 // limitations under the License.
 
 import { getMentionName } from '../parsers';
-import { Command, CommandType } from './Command';
+import { Command, CommandManager, CommandType } from './types';
 
 const actionsItems: Command[] = [
-  { value: '/system', label: 'System', group: 'actions', type: CommandType.Action },
+  {
+    value: '/system',
+    label: 'System',
+    group: 'actions',
+    type: CommandType.Action,
+    validate: () => false,
+  },
 ];
 const parameterItems: Command[] = [
   {
@@ -38,7 +44,30 @@ export const getHashtagCommands = (): Command[] => {
   return parameters;
 };
 
-export const getCommands = (mentionItems: Partial<Command>[]): Command[] => {
+export const getCommandType = (value: string | undefined): CommandType | undefined => {
+  if (value?.startsWith('/')) {
+    return CommandType.Action;
+  }
+  if (value?.startsWith('#')) {
+    return CommandType.Parameter;
+  }
+  if (value?.startsWith('@')) {
+    return CommandType.Mention;
+  }
+  return undefined;
+};
+
+export const compareCommands = (
+  command1: string | undefined,
+  command2: string | string,
+  type?: CommandType,
+): boolean => {
+  const type1 = getCommandType(command1);
+  const type2 = getCommandType(command2);
+  return (!type || (type === type1 && type === type2)) && command1 === command2;
+};
+
+export const getCommandManager = (mentionItems: Partial<Command>[]): CommandManager => {
   const commands = [
     ...mentionItems
       .filter((item) => !item.selected)
@@ -54,18 +83,15 @@ export const getCommands = (mentionItems: Partial<Command>[]): Command[] => {
     ...getHashtagCommands(),
     ...getActionCommands(),
   ];
-  return commands;
-};
-
-export const getCommandType = (value: string): CommandType | undefined => {
-  if (value.startsWith('/')) {
-    return CommandType.Action;
-  }
-  if (value.startsWith('#')) {
-    return CommandType.Parameter;
-  }
-  if (value.startsWith('@')) {
-    return CommandType.Mention;
-  }
-  return undefined;
+  return {
+    commands,
+    getCommand: (value: string, type: string) => {
+      const command = commands.find((m) => compareCommands(m.value, value, type as CommandType));
+      return command;
+    },
+    filterCommands: (commandValue: string): Command[] =>
+      commands.filter(
+        (c) => !(!c.value || c.value?.toLowerCase().indexOf(commandValue.toLowerCase()) === -1),
+      ),
+  };
 };
diff --git a/webapp/utils/commands/Command.ts b/webapp/utils/commands/types.ts
similarity index 71%
rename from webapp/utils/commands/Command.ts
rename to webapp/utils/commands/types.ts
index b4c3b458..c401db81 100644
--- a/webapp/utils/commands/Command.ts
+++ b/webapp/utils/commands/types.ts
@@ -22,4 +22,13 @@ export enum CommandType {
 
 export type Command = Ui.MenuItem & {
   type: CommandType;
+  execute?: (value: string) => void;
+  postValidate?: (value?: string) => boolean;
+  validate?: (value?: string) => boolean;
+};
+
+export type CommandManager = {
+  commands: Command[];
+  getCommand: (value: string, type: string) => Command | undefined;
+  filterCommands: (commandValue: string) => Command[];
 };
diff --git a/webapp/utils/parsers/index.ts b/webapp/utils/parsers/index.ts
index dd39a37b..8748a453 100644
--- a/webapp/utils/parsers/index.ts
+++ b/webapp/utils/parsers/index.ts
@@ -37,6 +37,7 @@ export type PromptToken = {
   value: string;
   index: number;
   state?: PromptTokenState;
+  blockOtherCommands?: boolean;
 };
 
 export type ParsedPrompt = {
diff --git a/webapp/utils/parsers/validator.ts b/webapp/utils/parsers/validator.ts
index 192e80b3..ec0fd53e 100644
--- a/webapp/utils/parsers/validator.ts
+++ b/webapp/utils/parsers/validator.ts
@@ -13,19 +13,11 @@
 // limitations under the License.
 
 import logger from '../logger';
-import {
-  ParsedPrompt,
-  PromptToken,
-  PromptTokenState,
-  PromptTokenType,
-  compareActions,
-  compareHashtags,
-  compareMentions,
-} from '.';
-import { Command } from '../commands/Command';
+import { ParsedPrompt, PromptToken, PromptTokenState, PromptTokenType } from '.';
+import { CommandManager } from '../commands/types';
 
 const validator = (
-  commands: Command[],
+  commandManager: CommandManager,
   token: PromptToken,
   parsedPrompt: ParsedPrompt,
   _previousToken: PromptToken | undefined,
@@ -42,10 +34,12 @@ const validator = (
   let { type } = token;
   const isAtCaret = token.value.length + token.index === parsedPrompt.caretPosition;
   const isEditing = type !== PromptTokenType.Text && isAtCaret;
+  let blockOtherCommands: boolean | undefined;
+  const command = commandManager.getCommand(token.value, type);
   if (type === PromptTokenType.Mention) {
     if (isEditing) {
       state = PromptTokenState.Editing;
-    } else if (!commands.find((m) => compareMentions(m.value, token.value))) {
+    } else if (!command) {
       // this model is not available
       state = PromptTokenState.Error;
     } else if (parsedPrompt.tokens.find((to) => to.value === token.value && to.type === type)) {
@@ -56,7 +50,6 @@ const validator = (
       state = PromptTokenState.Disabled;
     }
   } else if (type === PromptTokenType.Hashtag) {
-    const command = commands.find((m) => compareHashtags(m.value, token.value));
     if (isEditing) {
       state = PromptTokenState.Editing;
     } else if (!command) {
@@ -70,15 +63,16 @@ const validator = (
       state = PromptTokenState.Disabled;
     }
   } else if (type === PromptTokenType.Action) {
-    const command = commands.find((m) => compareActions(m.value, token.value));
     if (isEditing) {
       state = PromptTokenState.Editing;
     } else if (!command) {
       // this command is not available
       state = PromptTokenState.Error;
+    } else {
+      blockOtherCommands = command.validate?.();
     }
   } else if (type === PromptTokenType.Text && _previousToken?.type === PromptTokenType.Hashtag) {
-    const previousCommand = commands.find((m) => compareHashtags(m.value, _previousToken.value));
+    const previousCommand = commandManager.getCommand(_previousToken.value, _previousToken.type);
     if (previousCommand && previousCommand.group !== 'parameters-boolean') {
       type = PromptTokenType.ParameterValue;
       previousToken = { ..._previousToken, state: PromptTokenState.Ok };
@@ -93,7 +87,7 @@ const validator = (
     state = PromptTokenState.Editing;
     type = PromptTokenType.Hashtag;
   }
-  return [{ ...token, type, state }, previousToken];
+  return [{ ...token, type, state, blockOtherCommands }, previousToken];
 };
 
 export default validator;

From 5a82a0601c7836b591f4b1e57a277fc354ced34d Mon Sep 17 00:00:00 2001
From: mikbry <mik@miklabs.com>
Date: Thu, 29 Feb 2024 15:20:25 +0100
Subject: [PATCH 3/6] feat: lock parsing tokens after command action

---
 .../views/Threads/PromptCommandInput.tsx         |  8 +++-----
 webapp/utils/commands/index.ts                   |  2 +-
 webapp/utils/commands/types.ts                   |  2 +-
 webapp/utils/parsers/index.ts                    | 10 ++++++++--
 webapp/utils/parsers/validator.ts                | 16 ++++++++++------
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/webapp/components/views/Threads/PromptCommandInput.tsx b/webapp/components/views/Threads/PromptCommandInput.tsx
index f20d1dce..9a81ff91 100644
--- a/webapp/components/views/Threads/PromptCommandInput.tsx
+++ b/webapp/components/views/Threads/PromptCommandInput.tsx
@@ -113,10 +113,8 @@ function PromptCommandInput({
       if (textarea && dropdown) {
         const { currentWord, caretStartIndex } = getCurrentWord(textarea);
         valueChange(text, caretStartIndex);
-        const start = value?.text.trim().length || 0;
-        logger.info('value length', start);
-        if (isCommand(currentWord, start)) {
-          logger.info('isCommand', currentWord, start, commandValue);
+        const start = text.trim().length -currentWord.length;
+        if (value && !value.locked && isCommand(currentWord, start)) {
           setCommandValue(currentWord);
           positionDropdown();
           toggleDropdown();
@@ -125,7 +123,7 @@ function PromptCommandInput({
         }
       }
     },
-    [commandValue, positionDropdown, value?.text, valueChange],
+    [commandValue, positionDropdown, value, valueChange],
   );
 
   const handleCommandSelect = useCallback(
diff --git a/webapp/utils/commands/index.ts b/webapp/utils/commands/index.ts
index cc803f1e..aea60ae6 100644
--- a/webapp/utils/commands/index.ts
+++ b/webapp/utils/commands/index.ts
@@ -21,7 +21,7 @@ const actionsItems: Command[] = [
     label: 'System',
     group: 'actions',
     type: CommandType.Action,
-    validate: () => false,
+    validate: () => true,
   },
 ];
 const parameterItems: Command[] = [
diff --git a/webapp/utils/commands/types.ts b/webapp/utils/commands/types.ts
index c401db81..6bd9cb13 100644
--- a/webapp/utils/commands/types.ts
+++ b/webapp/utils/commands/types.ts
@@ -16,7 +16,7 @@ import { Ui } from '@/types';
 
 export enum CommandType {
   Action = 'action',
-  Parameter = 'parameter',
+  Parameter = 'hashtag',
   Mention = 'mention',
 }
 
diff --git a/webapp/utils/parsers/index.ts b/webapp/utils/parsers/index.ts
index 8748a453..6f425c62 100644
--- a/webapp/utils/parsers/index.ts
+++ b/webapp/utils/parsers/index.ts
@@ -46,6 +46,7 @@ export type ParsedPrompt = {
   caretPosition: number;
   currentTokenIndex: number;
   tokens: PromptToken[];
+  locked?: boolean;
 };
 
 type ParsePromptOptions =
@@ -95,17 +96,19 @@ export function parsePrompt(options: ParsePromptOptions, validator: TokenValidat
   const tokens: PromptToken[] = [];
   const spans = value.split(/(?<=^| )([@|#|/][\p{L}0-9._-]+)|(\n)/gu);
   let index = 0;
-  const parsedPrompt = { tokens, caretPosition, raw: value, text: '', currentTokenIndex: 0 };
+  const parsedPrompt: ParsedPrompt = { tokens, caretPosition, raw: value, text: '', currentTokenIndex: 0 };
   let previousToken: PromptToken | undefined;
+  let locked: boolean | undefined;
   spans.forEach((span) => {
     if (!span) {
       return;
     }
     let text = span || ' ';
-    const type = getTokenType(text, parsedPrompt.text.trim().length);
+    const type = locked ? PromptTokenType.Text : getTokenType(text, parsedPrompt.text.trim().length);
     let token: PromptToken = { type, value: text, index };
     if (type !== PromptTokenType.Text || previousToken?.type === PromptTokenType.Hashtag) {
       [token, previousToken] = validator(token, parsedPrompt, previousToken);
+      locked = token.blockOtherCommands;
       if (previousToken) {
         const space = text.indexOf(' ', text.length === 1 ? 0 : 1);
         if (space > 0) {
@@ -132,6 +135,9 @@ export function parsePrompt(options: ParsePromptOptions, validator: TokenValidat
     tokens.push(token);
     index += text.length;
   });
+  if (locked){
+    parsedPrompt.locked = true;
+  }
   return parsedPrompt;
 }
 
diff --git a/webapp/utils/parsers/validator.ts b/webapp/utils/parsers/validator.ts
index ec0fd53e..c57c1281 100644
--- a/webapp/utils/parsers/validator.ts
+++ b/webapp/utils/parsers/validator.ts
@@ -63,14 +63,18 @@ const validator = (
       state = PromptTokenState.Disabled;
     }
   } else if (type === PromptTokenType.Action) {
-    if (isEditing) {
-      state = PromptTokenState.Editing;
-    } else if (!command) {
-      // this command is not available
-      state = PromptTokenState.Error;
+    if (parsedPrompt.text.trim().length > 0 || previousToken?.type !== PromptTokenType.Text) {
+      type = PromptTokenType.Text;
     } else {
-      blockOtherCommands = command.validate?.();
+      if (isEditing) {
+        state = PromptTokenState.Editing;
+      } else if (!command) {
+        // this command is not available
+        state = PromptTokenState.Error;
+      }
+      blockOtherCommands = command?.validate?.();
     }
+
   } else if (type === PromptTokenType.Text && _previousToken?.type === PromptTokenType.Hashtag) {
     const previousCommand = commandManager.getCommand(_previousToken.value, _previousToken.type);
     if (previousCommand && previousCommand.group !== 'parameters-boolean') {

From a7fc2eae0f9d3c8058dffebe9115203dd52b1771 Mon Sep 17 00:00:00 2001
From: mikbry <mik@miklabs.com>
Date: Thu, 29 Feb 2024 15:21:47 +0100
Subject: [PATCH 4/6] chore: prettier

---
 .../views/Threads/PromptCommandInput.tsx           |  2 +-
 webapp/utils/parsers/index.ts                      | 14 +++++++++++---
 webapp/utils/parsers/validator.ts                  |  1 -
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/webapp/components/views/Threads/PromptCommandInput.tsx b/webapp/components/views/Threads/PromptCommandInput.tsx
index 9a81ff91..201b0f8b 100644
--- a/webapp/components/views/Threads/PromptCommandInput.tsx
+++ b/webapp/components/views/Threads/PromptCommandInput.tsx
@@ -113,7 +113,7 @@ function PromptCommandInput({
       if (textarea && dropdown) {
         const { currentWord, caretStartIndex } = getCurrentWord(textarea);
         valueChange(text, caretStartIndex);
-        const start = text.trim().length -currentWord.length;
+        const start = text.trim().length - currentWord.length;
         if (value && !value.locked && isCommand(currentWord, start)) {
           setCommandValue(currentWord);
           positionDropdown();
diff --git a/webapp/utils/parsers/index.ts b/webapp/utils/parsers/index.ts
index 6f425c62..4a1301aa 100644
--- a/webapp/utils/parsers/index.ts
+++ b/webapp/utils/parsers/index.ts
@@ -96,7 +96,13 @@ export function parsePrompt(options: ParsePromptOptions, validator: TokenValidat
   const tokens: PromptToken[] = [];
   const spans = value.split(/(?<=^| )([@|#|/][\p{L}0-9._-]+)|(\n)/gu);
   let index = 0;
-  const parsedPrompt: ParsedPrompt = { tokens, caretPosition, raw: value, text: '', currentTokenIndex: 0 };
+  const parsedPrompt: ParsedPrompt = {
+    tokens,
+    caretPosition,
+    raw: value,
+    text: '',
+    currentTokenIndex: 0,
+  };
   let previousToken: PromptToken | undefined;
   let locked: boolean | undefined;
   spans.forEach((span) => {
@@ -104,7 +110,9 @@ export function parsePrompt(options: ParsePromptOptions, validator: TokenValidat
       return;
     }
     let text = span || ' ';
-    const type = locked ? PromptTokenType.Text : getTokenType(text, parsedPrompt.text.trim().length);
+    const type = locked
+      ? PromptTokenType.Text
+      : getTokenType(text, parsedPrompt.text.trim().length);
     let token: PromptToken = { type, value: text, index };
     if (type !== PromptTokenType.Text || previousToken?.type === PromptTokenType.Hashtag) {
       [token, previousToken] = validator(token, parsedPrompt, previousToken);
@@ -135,7 +143,7 @@ export function parsePrompt(options: ParsePromptOptions, validator: TokenValidat
     tokens.push(token);
     index += text.length;
   });
-  if (locked){
+  if (locked) {
     parsedPrompt.locked = true;
   }
   return parsedPrompt;
diff --git a/webapp/utils/parsers/validator.ts b/webapp/utils/parsers/validator.ts
index c57c1281..3fbbafe7 100644
--- a/webapp/utils/parsers/validator.ts
+++ b/webapp/utils/parsers/validator.ts
@@ -74,7 +74,6 @@ const validator = (
       }
       blockOtherCommands = command?.validate?.();
     }
-
   } else if (type === PromptTokenType.Text && _previousToken?.type === PromptTokenType.Hashtag) {
     const previousCommand = commandManager.getCommand(_previousToken.value, _previousToken.type);
     if (previousCommand && previousCommand.group !== 'parameters-boolean') {

From 1122b5ee675b5aa066cfeb365b5b6853e97d7774 Mon Sep 17 00:00:00 2001
From: mikbry <mik@miklabs.com>
Date: Thu, 29 Feb 2024 15:55:56 +0100
Subject: [PATCH 5/6] feat: save /system message

---
 .../views/Threads/PromptCommandInput.tsx      |  6 +--
 webapp/components/views/Threads/Thread.tsx    | 52 +++++++++++++++++--
 webapp/utils/parsers/validator.ts             |  2 +-
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/webapp/components/views/Threads/PromptCommandInput.tsx b/webapp/components/views/Threads/PromptCommandInput.tsx
index 201b0f8b..a0f41ab4 100644
--- a/webapp/components/views/Threads/PromptCommandInput.tsx
+++ b/webapp/components/views/Threads/PromptCommandInput.tsx
@@ -168,13 +168,13 @@ function PromptCommandInput({
     if (textarea && dropdown) {
       const { currentWord } = getCurrentWord(textarea);
 
-      const start = value?.text.trim().length || 0;
-      logger.info('isCommand selection change', currentWord, commandValue, start);
+      const start = textarea.value.trim().length - currentWord.length;
+
       if (!isCommand(currentWord, start) && commandValue !== '') {
         toggleDropdown(false);
       }
     }
-  }, [commandValue, value?.text]);
+  }, [commandValue]);
 
   useEffect(() => {
     const textarea = textareaRef.current;
diff --git a/webapp/components/views/Threads/Thread.tsx b/webapp/components/views/Threads/Thread.tsx
index a29604ac..1b5e2634 100644
--- a/webapp/components/views/Threads/Thread.tsx
+++ b/webapp/components/views/Threads/Thread.tsx
@@ -340,10 +340,53 @@ function Thread({
     return returnedMessage;
   };
 
+  const clearPrompt = (conversation: Conversation | undefined, newConversations = conversations) => {
+    setChangedPrompt(undefined);
+
+    let updatedConversations = newConversations;
+    if (conversation) {
+      updatedConversations = updateConversation({ ...conversation, currentPrompt: undefined, temp: false }, newConversations);
+      updateConversations(updatedConversations);
+    }
+    return updatedConversations;
+  }
+
   const handleSendMessage = async () => {
     if (conversationId === undefined) {
       return;
     }
+    const action = currentPrompt.tokens.find((to) => to.type === PromptTokenType.Action);
+
+
+    if (action) {
+      let updatedConversation = selectedConversation;
+      let updatedConversations = conversations;
+      const command = commandManager.getCommand(action.value, action.type);
+      // logger.info('command action', command, action.value, action.type, currentPrompt.text);
+      if (command) {
+        command.execute?.(action.value);
+        if (command.label === 'System') {
+          const message = createMessage({ role: 'system', name: 'system' }, currentPrompt.text, currentPrompt.raw);
+          let updatedConversationId: string | undefined;
+          ({
+            updatedConversationId,
+            updatedConversations,
+          } = await updateMessagesAndConversation(
+            [message],
+            getConversationMessages(conversationId),
+          ));
+      
+          updatedConversation = getConversation(
+            updatedConversationId,
+            updatedConversations,
+          ) as Conversation;
+        
+        }
+      }
+      clearPrompt(updatedConversation, updatedConversations);
+      return;
+    };
+  
     const mentions = currentPrompt.tokens.filter((to) => to.type === PromptTokenType.Mention);
     const modelItem =
       mentions.length === 1
@@ -407,12 +450,14 @@ function Thread({
       conversation.name = getConversationTitle(conversation);
     }
 
-    conversation.currentPrompt = undefined;
+    /* conversation.currentPrompt = undefined;
     setChangedPrompt(undefined);
     conversation.temp = false;
 
     updatedConversations = updateConversation(conversation, updatedConversations);
-    updateConversations(updatedConversations);
+    updateConversations(updatedConversations); */
+    updatedConversations = clearPrompt(conversation, updatedConversations);
+  
     logger.info('onSendMessage', updatedMessages, conversation);
     message = await sendMessage(message, updatedMessages, conversation, updatedConversations);
 
@@ -506,9 +551,6 @@ function Thread({
 
     const conversation = getConversation(conversationId, conversations);
     if (conversation && message.content) {
-      /* const { contentHistory = [] } = message;
-      contentHistory.push(message.content);
-      const newMessage = { ...message, content: newContent, contentHistory }; */
       const parsedContent = parsePrompt({ text: newContent }, tokenValidator);
       const newMessage = changeMessageContent(message, parsedContent.text, parsedContent.raw);
       const conversationMessages = getConversationMessages(conversationId);
diff --git a/webapp/utils/parsers/validator.ts b/webapp/utils/parsers/validator.ts
index 3fbbafe7..36c79029 100644
--- a/webapp/utils/parsers/validator.ts
+++ b/webapp/utils/parsers/validator.ts
@@ -63,7 +63,7 @@ const validator = (
       state = PromptTokenState.Disabled;
     }
   } else if (type === PromptTokenType.Action) {
-    if (parsedPrompt.text.trim().length > 0 || previousToken?.type !== PromptTokenType.Text) {
+    if (parsedPrompt.text.trim().length > 0 || (previousToken && previousToken.type !== PromptTokenType.Text)) {
       type = PromptTokenType.Text;
     } else {
       if (isEditing) {

From 8017363ebd740b0817a64a9eb69bda35b695089b Mon Sep 17 00:00:00 2001
From: mikbry <mik@miklabs.com>
Date: Thu, 29 Feb 2024 15:56:31 +0100
Subject: [PATCH 6/6] chore: prettier

---
 webapp/components/views/Threads/Thread.tsx | 33 +++++++++++++---------
 webapp/utils/parsers/validator.ts          |  5 +++-
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/webapp/components/views/Threads/Thread.tsx b/webapp/components/views/Threads/Thread.tsx
index 1b5e2634..04fea8a6 100644
--- a/webapp/components/views/Threads/Thread.tsx
+++ b/webapp/components/views/Threads/Thread.tsx
@@ -340,16 +340,22 @@ function Thread({
     return returnedMessage;
   };
 
-  const clearPrompt = (conversation: Conversation | undefined, newConversations = conversations) => {
+  const clearPrompt = (
+    conversation: Conversation | undefined,
+    newConversations = conversations,
+  ) => {
     setChangedPrompt(undefined);
 
     let updatedConversations = newConversations;
     if (conversation) {
-      updatedConversations = updateConversation({ ...conversation, currentPrompt: undefined, temp: false }, newConversations);
+      updatedConversations = updateConversation(
+        { ...conversation, currentPrompt: undefined, temp: false },
+        newConversations,
+      );
       updateConversations(updatedConversations);
     }
     return updatedConversations;
-  }
+  };
 
   const handleSendMessage = async () => {
     if (conversationId === undefined) {
@@ -357,7 +363,6 @@ function Thread({
     }
     const action = currentPrompt.tokens.find((to) => to.type === PromptTokenType.Action);
 
-
     if (action) {
       let updatedConversation = selectedConversation;
       let updatedConversations = conversations;
@@ -366,27 +371,27 @@ function Thread({
       if (command) {
         command.execute?.(action.value);
         if (command.label === 'System') {
-          const message = createMessage({ role: 'system', name: 'system' }, currentPrompt.text, currentPrompt.raw);
+          const message = createMessage(
+            { role: 'system', name: 'system' },
+            currentPrompt.text,
+            currentPrompt.raw,
+          );
           let updatedConversationId: string | undefined;
-          ({
-            updatedConversationId,
-            updatedConversations,
-          } = await updateMessagesAndConversation(
+          ({ updatedConversationId, updatedConversations } = await updateMessagesAndConversation(
             [message],
             getConversationMessages(conversationId),
           ));
-      
+
           updatedConversation = getConversation(
             updatedConversationId,
             updatedConversations,
           ) as Conversation;
-        
         }
       }
       clearPrompt(updatedConversation, updatedConversations);
       return;
-    };
-  
+    }
+
     const mentions = currentPrompt.tokens.filter((to) => to.type === PromptTokenType.Mention);
     const modelItem =
       mentions.length === 1
@@ -457,7 +462,7 @@ function Thread({
     updatedConversations = updateConversation(conversation, updatedConversations);
     updateConversations(updatedConversations); */
     updatedConversations = clearPrompt(conversation, updatedConversations);
-  
+
     logger.info('onSendMessage', updatedMessages, conversation);
     message = await sendMessage(message, updatedMessages, conversation, updatedConversations);
 
diff --git a/webapp/utils/parsers/validator.ts b/webapp/utils/parsers/validator.ts
index 36c79029..bd00d762 100644
--- a/webapp/utils/parsers/validator.ts
+++ b/webapp/utils/parsers/validator.ts
@@ -63,7 +63,10 @@ const validator = (
       state = PromptTokenState.Disabled;
     }
   } else if (type === PromptTokenType.Action) {
-    if (parsedPrompt.text.trim().length > 0 || (previousToken && previousToken.type !== PromptTokenType.Text)) {
+    if (
+      parsedPrompt.text.trim().length > 0 ||
+      (previousToken && previousToken.type !== PromptTokenType.Text)
+    ) {
       type = PromptTokenType.Text;
     } else {
       if (isEditing) {