Add link generate and tooltip in UI for /timetable

Author: kevin-lann

course-matrix/backend/src/constants/constants.ts

@@ -51,4 +51,4 @@ export const CHATBOT_MEMORY_THRESHOLD = 3;
 
 export const CHATBOT_TIMETABLE_CMD = "/timetable";
 
-export const CHATBOT_TOOL_CALL_MAX_STEPS = 3;
+export const CHATBOT_TOOL_CALL_MAX_STEPS = 5;

course-matrix/backend/src/controllers/aiController.ts

@@ -244,6 +244,10 @@ export const chat = asyncHandler(async (req: Request, res: Response) => {
             - Include course codes when referencing specific courses
             - If information is missing from the context but likely exists, try to use info from web to answer. If still not able to form a decent response, acknowledge the limitation
             - For unrelated questions, politely explain that you're specialized in UTSC academic information
+
+            ## Tool call guidelines
+            - Include the timetable ID in all getTimetbles tool call responses
+            - If the tool call is a getTimetables call, then at the end of each timetable listed, include a link displayed as "View timetable" to ${process.env.CLIENT_APP_URL}/dashboard/timetable?edit=[[TIMETABLE_ID]] , where TIMETABLE_ID is the id of the respective timetable.
             `,
         messages,
         tools: {

course-matrix/frontend/src/components/assistant-ui/thread.tsx

@@ -12,6 +12,7 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   CopyIcon,
+  Info,
   PencilIcon,
   RefreshCwIcon,
   SendHorizontalIcon,
@@ -81,6 +82,7 @@ const ThreadWelcome: FC = () => {
             Hi my name is <span className="text-primary">Morpheus</span>. How
             can I help you today?
           </p>
+          <p className="mt-4 text-sm text-gray-300"><strong>Tip: </strong> Use /timetable to work with your timetables</p>
         </div>
         <ThreadWelcomeSuggestions />
       </div>
@@ -111,6 +113,16 @@ const ThreadWelcomeSuggestions: FC = () => {
           What is Course Matrix?
         </span>
       </ThreadPrimitive.Suggestion>
+      <ThreadPrimitive.Suggestion
+        className="hover:bg-muted/80 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-lg border p-3 transition-colors ease-in"
+        prompt="/timetable show my timetables"
+        method="replace"
+        autoSend
+      >
+        <span className="line-clamp-2 text-ellipsis text-sm font-semibold">
+          <span className="text-green-500">/timetable</span> show my timetables
+        </span>
+      </ThreadPrimitive.Suggestion>
     </div>
   );
 };