Merge pull request #285 from l3vels/feat/system-message-template-system

feat: add templating system in system message builder

Author: Chkhikvadze

apps/server/controllers/agent.py

@@ -11,12 +11,11 @@
 from typings.auth import UserAccount
 from utils.agent import convert_agents_to_agent_list, convert_model_to_response
 from utils.auth import authenticate
+from utils.system_message import SystemMessageBuilder
 
 # Standard library imports
 
 
-
-
 router = APIRouter()
 
 
@@ -213,7 +212,10 @@ def get_agent_by_id(
             status_code=404, detail="Agent not found"
         )  # Ensure consistent case in error messages
 
-    return convert_model_to_response(db_agent, is_system_message)
+    agent_with_configs = convert_model_to_response(db_agent)
+    system_message = SystemMessageBuilder(agent_with_configs).build()
+    agent_with_configs.system_message = system_message
+    return agent_with_configs
 
 
 @router.get("/discover/{id}", response_model=AgentWithConfigsOutput)

apps/server/models/agent.py

@@ -34,7 +34,7 @@ class AgentModel(BaseModel):
     # __abstract__ = True
     __tablename__ = "agent"
     id = Column(UUID, primary_key=True, index=True, default=uuid.uuid4)
-    name = Column(String)
+    name = Column(String, index=True)
     avatar = Column(String(300), default=None)
     role = Column(String)
     parent_id = Column(
@@ -249,6 +249,22 @@ def get_public_agents(cls, db):
         )
         return agents
 
+    @classmethod
+    def get_agent_by_name(cls, session, account_id: UUID, agent_name: str):
+        agent = (
+            session.query(AgentModel)
+            .outerjoin(UserModel, AgentModel.created_by == UserModel.id)
+            .filter(
+                AgentModel.account_id == account_id,
+                AgentModel.is_deleted.is_(False),
+                AgentModel.name.ilike(f"%{agent_name}%"),
+            )
+            .options(joinedload(AgentModel.configs))
+            .options(joinedload(AgentModel.creator))
+            .first()
+        )
+        return agent
+
     @classmethod
     def get_agent_by_id(cls, db, agent_id):
         """

apps/server/utils/agent.py

@@ -2,15 +2,12 @@
 
 from models.agent import AgentModel
 from typings.agent import AgentOutput, AgentWithConfigsOutput, ConfigsOutput
-from utils.system_message import SystemMessageBuilder
 from utils.type import convert_value_to_type
 from utils.user import \
     convert_model_to_response as user_convert_model_to_response
 
 
-def convert_model_to_response(
-    agent_model: AgentModel, is_system_message: bool = False
-) -> AgentWithConfigsOutput:
+def convert_model_to_response(agent_model: AgentModel) -> AgentWithConfigsOutput:
     agent_data = {}
 
     # Extract attributes from AgentModel using annotations of Agent
@@ -43,9 +40,6 @@ def convert_model_to_response(
         agent=AgentOutput(**agent_data),
         configs=ConfigsOutput(**configs) if configs else None,
     )
-    if is_system_message:
-        system_message = SystemMessageBuilder(agent_with_config).build()
-        agent_with_config.system_message = system_message
 
     return agent_with_config
 

apps/server/utils/system_message.py

@@ -1,6 +1,11 @@
+import re
 from typing import List, Optional
 
+from fastapi_sqlalchemy import db
+
+from models.agent import AgentModel
 from typings.agent import AgentWithConfigsOutput
+from utils.agent import convert_model_to_response
 
 
 class SystemMessageBuilder:
@@ -24,6 +29,7 @@ def build(self) -> str:
         context = self.build_pre_retrieved_context(self.pre_retrieved_context)
 
         result = f"{base_system_message}{role}{description}{goals}{instructions}{constraints}{context}"
+        result = self.replace_templates(result)
         return result
 
     def build_base_system_message(self, text: str) -> str:
@@ -80,3 +86,53 @@ def build_pre_retrieved_context(self, text: str):
         result = "CONTEXT DATA: \n" f"{text}\n"
 
         return result
+
+    def replace_templates(self, text: str) -> str:
+        # This pattern will match strings like {{agent.sales.greeting}} and {{greeting}}
+        pattern = re.compile(
+            r"\{\{(agent\.(?P<agent_name>[\w\s]+?)\.)?(?P<field_name>\w+)(\[(?P<index>\d+)\])?\}\}"
+        )
+
+        def replace_match(match):
+            agent_name = match.group("agent_name")
+            field_name = match.group("field_name")
+            index = match.group("index")
+
+            if agent_name:
+                # Fetch agent by name
+                agent = AgentModel.get_agent_by_name(
+                    db.session, self.agent.account_id, agent_name
+                )
+                agent_data = convert_model_to_response(agent)
+                source_data = (
+                    agent_data.agent
+                    if hasattr(agent_data.agent, field_name)
+                    else agent_data.configs
+                )
+            else:
+                # Use current agent if no agent name is provided
+                source_data = (
+                    self.agent if hasattr(self.agent, field_name) else self.configs
+                )
+
+            if not source_data:
+                return match.group(
+                    0
+                )  # Return the original text if agent or property not found
+
+            # Retrieve the field value
+            value = getattr(source_data, field_name, "Unknown field")
+            if index and isinstance(value, list):
+                try:
+                    value = value[int(index)]
+                except IndexError:
+                    value = "Index out of range"
+            elif isinstance(value, list):
+                # Format the list for display
+                value = f"{field_name.upper()}: \n" + "\n".join(
+                    f"- {item}" for item in value
+                )
+
+            return str(value)
+
+        return pattern.sub(replace_match, text)

apps/ui/src/gql/ai/agent/agentById.gql

@@ -2,5 +2,6 @@ query agentById($id: id!) @api(name: "ai") {
   agentById(id: $id) @rest(type: "Agent", path: "/agent/{args.id}", method: "GET", endpoint: "ai") {
     agent
     configs
+    system_message
   }
 }

apps/ui/src/i18n/locales/en.json

@@ -337,5 +337,6 @@
   "input-mode": "Input Mode",
   "output": "Output",
   "error": "Error",
-  "similarity-top-k": "Similarity Top K"
+  "similarity-top-k": "Similarity Top K",
+  "system-message": "System Message"
 }

apps/ui/src/modals/AgentViewModal.tsx

@@ -9,11 +9,13 @@ import IconButton from '@l3-lib/ui-core/dist/IconButton'
 
 import Close from '@l3-lib/ui-core/dist/icons/Close'
 import { useDiscoverAgentByIdService } from 'services/discover/useDiscoverAgentById'
+import { useAgentByIdService } from 'services/agent/useAgentByIdService'
+import { AgentWithConfigs } from 'types'
 
 type AgentViewModalProps = {
   data: {
     id: string
-    agent: any
+    agent: AgentWithConfigs
   }
 }
 
@@ -22,6 +24,8 @@ const AgentViewModal = ({ data }: AgentViewModalProps) => {
 
   const { id, agent } = data
 
+  const { data: agentObj } = useAgentByIdService({ id: agent.agent.id })
+
   const { data: agentById } = useDiscoverAgentByIdService({ id: id })
 
   return (
@@ -33,7 +37,7 @@ const AgentViewModal = ({ data }: AgentViewModalProps) => {
         hideCloseButton
       >
         <StyledModalBody>
-          <AgentView agentData={agentById || agent} />
+          <AgentView agentData={agentObj || agentById || agent} />
         </StyledModalBody>
 
         <StyledButtonWrapper>

apps/ui/src/pages/Agents/AgentCard/AgentCard.tsx

@@ -21,6 +21,7 @@ import TypographyPrimary from 'components/Typography/Primary'
 import TypographyTertiary from 'components/Typography/Tertiary'
 import { ButtonPrimary } from 'components/Button/Button'
 import { textSlicer } from 'utils/textSlicer'
+import { AgentWithConfigs } from 'types'
 
 type AgentCardProps = {
   name: string
@@ -32,14 +33,13 @@ type AgentCardProps = {
   onViewClick: () => void
   onChatClick?: () => void
   onCreateClick?: () => void
-  creator?: any
+  creator?: AgentWithConfigs['agent']['creator']
   avatar?: string
 }
 
 const AgentCard = ({
   name,
   description,
-  // headerText,
   headerTag,
   onDeleteClick,
   onEditClick,
@@ -82,15 +82,6 @@ const AgentCard = ({
             )}
           </div>
         </StyledTitleWrapper>
-        {/* <div>
-          {headerText && (
-            <TypographySecondary
-              value={headerText}
-              type={Typography.types.P}
-              size={Typography.sizes.sm}
-            />
-          )}
-        </div> */}
       </StyledCardHeader>
       <StyledCardBody>
         <StyledBodyTextWrapper>
@@ -104,7 +95,6 @@ const AgentCard = ({
       <StyledCardFooter className='cardFooter'>
         {creator && (
           <StyledCreatorWrapper>
-            {/* <StyledLogo src={l3Logo} /> */}
             <AvatarGenerator
               name={creator.name}
               size={16}
@@ -126,7 +116,6 @@ const AgentCard = ({
               icon={() => <StyledDeleteIcon />}
               size={Button.sizes.SMALL}
               kind={IconButton.kinds.TERTIARY}
-              // ariaLabel='Delete'
             />
           )}
           {onEditClick && (
@@ -135,7 +124,6 @@ const AgentCard = ({
               icon={() => <StyledEditIcon />}
               size={IconButton.sizes.SMALL}
               kind={IconButton.kinds.TERTIARY}
-              // ariaLabel='Edit'
             />
           )}
           {onViewClick && (
@@ -148,7 +136,6 @@ const AgentCard = ({
               )}
               size={Button.sizes.SMALL}
               kind={IconButton.kinds.TERTIARY}
-              // ariaLabel='View'
             />
           )}
           {onCreateClick && (

apps/ui/src/pages/Agents/AgentView/AgentView.tsx

@@ -19,16 +19,18 @@ import AgentToolkits from './components/AgentToolkits'
 import AgentDatasources from './components/AgentDatasources'
 
 import AgentVIewDetailBox from './components/AgentViewDetailBox'
+import { AgentWithConfigs } from 'types'
 
-const AgentView = ({ agentData }: { agentData?: any }) => {
+const AgentView = ({ agentData }: { agentData?: AgentWithConfigs }) => {
   const { t } = useTranslation()
   const params = useParams()
   const { agentId } = params
   const { data: agentById } = useAgentByIdService({ id: agentId || '' })
 
-  if (!agentById && !agentData) return <div />
+  const agent = agentById || agentData
+  if (!agent) return <div />
 
-  const { configs } = agentById || agentData
+  const { configs, system_message } = agent
 
   const { tools, goals, constraints, instructions, datasources, suggestions, greeting, text } =
     configs
@@ -51,13 +53,17 @@ const AgentView = ({ agentData }: { agentData?: any }) => {
           </>
         )}
       </StyledHeaderGroup>
-      <ComponentsWrapper noPadding hideBox={agentData}>
-        <StyledInnerWrapper noPadding={agentData}>
+      <ComponentsWrapper noPadding hideBox={!!agentData}>
+        <StyledInnerWrapper noPadding={!!agentData}>
           <StyledLeftColumn>
-            <AgentVIewDetailBox agentData={agentById || agentData} />
+            <AgentVIewDetailBox agentData={agent} />
           </StyledLeftColumn>
 
           <StyledRightColumn>
+            {system_message?.length ? (
+              <AdditionalInfoBox items={[system_message]} title={t('system-message')} />
+            ) : null}
+
             {tools?.length > 0 && <AgentToolkits tools={tools} />}
 
             {datasources?.length > 0 && <AgentDatasources datasources={datasources} />}

apps/ui/src/pages/Agents/Agents.tsx

@@ -6,7 +6,6 @@ import ComponentsWrapper from 'components/ComponentsWrapper/ComponentsWrapper'
 import {
   StyledHeaderGroup,
   StyledSectionDescription,
-  StyledSectionTitle,
   StyledSectionWrapper,
 } from 'pages/Home/homeStyle.css'
 
@@ -18,12 +17,13 @@ import { ButtonPrimary } from 'components/Button/Button'
 import HeadingPrimary from 'components/Heading/Primary'
 import Heading from '@l3-lib/ui-core/dist/Heading'
 import { useGetAccountModule } from 'utils/useGetAccountModule'
+import { AgentWithConfigs } from 'types'
 
 const Agents = ({ isHome }: { isHome?: boolean }) => {
   const { t } = useTranslation()
   const { getChatModules } = useGetAccountModule()
-  const agentModule = getChatModules('agent')
 
+  const agentModule = getChatModules('agent')
   const { agentsData, deleteAgentHandler } = useAgents()
 
   const navigate = useNavigate()
@@ -39,13 +39,6 @@ const Agents = ({ isHome }: { isHome?: boolean }) => {
           />
           <StyledSectionDescription>{`${t('agent-description')}`}</StyledSectionDescription>
         </StyledMainHeaderWrapper>
-        {/* <div>
-
-          <StyledSectionTitle>Agents</StyledSectionTitle>
-          <StyledSectionDescription>
-            Here are all your agents, managing tasks and operations.
-          </StyledSectionDescription>
-        </div> */}
 
         <div>
           {!isHome && (
@@ -58,10 +51,11 @@ const Agents = ({ isHome }: { isHome?: boolean }) => {
           )}
         </div>
       </StyledHeaderGroup>
+
       <ComponentsWrapper noPadding>
         <StyledCardsWrapper>
-          {agentsData?.map((agentObj: any, index: number) => {
-            const { agent } = agentObj
+          {agentsData?.map((agentWithConfigs: AgentWithConfigs, index: number) => {
+            const { agent } = agentWithConfigs
 
             const handleEdit = () => {
               navigate(`/agents/${agent.id}/edit-agent`)
@@ -99,14 +93,13 @@ export const StyledCardsWrapper = styled.div`
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
-
-  /* max-width: 1055px; */
   width: 100%;
   max-height: calc(100vh - 325px);
   height: 100%;
   overflow-y: auto;
   padding: 5px 32px;
 `
+
 const StyledMainHeaderWrapper = styled.div`
   display: flex;
   width: 100%;