Memory Playground #96

singhk97 · 2025-01-08T20:38:28Z

This PR introduces two high level applications:

packages/memory-server: A FastAPI server that wraps around the memory module and exposes core features like adding message, and retrieving memories.
playground: A simple web application to easily view and interact with the memory module.

Other changes

Ruff lint and format touched a bunch of unrelated files.

Example

Copilot

Copilot reviewed 41 out of 56 changed files in this pull request and generated no comments.

Files not reviewed (15)

packages/memory-server/.python-version: Language not supported
packages/memory-server/sample.env: Language not supported
playground/.gitignore: Language not supported
playground/index.html: Language not supported
playground/package.json: Language not supported
packages/memory_module/utils/teams_bot_middlware.py: Evaluated as low risk
packages/memory_module/storage/in_memory_storage.py: Evaluated as low risk
packages/memory_module/storage/sqlite_memory_storage.py: Evaluated as low risk
packages/evals/benchmark_memory_module.py: Evaluated as low risk
packages/memory_module/storage/sqlite_storage.py: Evaluated as low risk
playground/postcss.config.js: Evaluated as low risk
playground/README.md: Evaluated as low risk
packages/memory-server/memory_service.py: Evaluated as low risk
playground/src/api/memoryServer.ts: Evaluated as low risk
packages/memory-server/README.md: Evaluated as low risk

corinagum · 2025-01-08T21:38:07Z

packages/memory-server/README.md

@@ -0,0 +1,18 @@
+# Memory Server
+FastAPI wrapper around the memory module.


In the future, do we want to consider having the wrapper as separate package so people don't need to download the related dependencies if they want to?

(Can file for discussion and close this comment if anyone agrees)

I'm not sure what you mean since the wrapper is already a separate package. It's under packages/memory-server while the memory module is under packages/memory-module.

as in, if we were publishing it, don't publish it with the rest of the code (bloat). but I'm still unclear on the publishing bit haha.

packages/memory-server/routes.py

corinagum · 2025-01-08T22:02:15Z

playground/package.json

+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.344.0",


Unnecessary dependency. We should be using Microsoft's/Teams' fluent icons

corinagum · 2025-01-08T22:03:34Z

playground/package.json

+    "react-router-dom": "^6.14.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",


Do we need the js eslint since the code is in typescript?

lilyydu · 2025-01-09T21:51:33Z

playground/src/types.ts

+  content: string;
+  created_at: string;
+  updated_at: string;
+  memory_type: 'semantic' | 'episodic';


nit: saving these as constants?

heyitsaamir

This is helpful, but I think we should think about how this fits into the developer story. The memory module will be published as a separate package. This playground will only really come into play if the developer tries to pull this repo right?

heyitsaamir · 2025-01-09T22:00:11Z

packages/memory-server/README.md

@@ -0,0 +1,18 @@
+# Memory Server


I don't want to spend too much extra time on this tool, but it would be worth considering how we could combine the efforts in the sample and this. (i.e. the sample has a web component that is really simple to show a user's memories). Just a consideration, not actionable.

heyitsaamir · 2025-01-09T22:01:11Z

playground/README.md

@@ -0,0 +1,19 @@
+# Memory Playground UI
+
+A simple web application to easily view and interact with the memory module.


Worth adding that this isn't meant for production

corinagum · 2025-01-10T22:07:39Z

packages/evals/benchmark_memory_module.py

@@ -14,13 +14,12 @@

 sys.path.append(os.path.join(os.path.dirname(__file__), ".."))

+from evals.helpers import Dataset, DatasetItem, load_dataset, setup_mlflow


TODO for later: unit tests. Same for the playground.

corinagum · 2025-01-10T22:09:12Z

playground/src/components/DataTable.tsx

+
+const DataTableBase = function (props: any) {
+	return (
+		<DataTable


TODO for future: read up on react-data-table-component's styles for dark mode :D

corinagum · 2025-01-10T22:09:43Z

playground/src/components/DarkModeSwitcher.tsx

+          }`}
+        >
+          <span className="dark:hidden">
+            <svg


Ideally the svg should be in a different file and imported.

corinagum · 2025-01-10T22:11:18Z

packages/memory-server/pyproject.toml

+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.12"


Can you change to

Suggested change

requires-python = ">=3.12"

requires-python = ">=3.11,<3.13"

corinagum · 2025-01-10T22:11:26Z

packages/memory-server/pyproject.toml

+[project]
+name = "memory-server"
+version = "0.1.0"
+description = "Add your description here"


description

corinagum · 2025-01-10T22:13:48Z

packages/memory-server/pyproject.toml

@@ -0,0 +1,19 @@
+[project]
+name = "memory-server"
+version = "0.1.0"


version must be directly below [project]. Just did a PR that fixed this elsewhere :D

corinagum · 2025-01-10T22:14:41Z

playground/README.md

+1. Navigate to this folder in the termainl.
+1. Set up the dependencies by doing `pnpm install` in the root folder.
+1. Run `pnpm run dev` to start the application on port 5173.
+1. Ensure that the memory server is configured and running locally. See `packages/memory-server`.


Link to memory server readme?

corinagum · 2025-01-10T22:15:27Z

playground/README.md

+
+# Disclaimer
+
+Some components were taken from [TailAdmin](https://tailadmin.com/)'s free to use component package, which is under the MIT License.


If you haven't already, this disclaimer should be where that code is

corinagum · 2025-01-10T22:16:09Z

playground/package.json

+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",


@types/react-hooks?

corinagum · 2025-01-10T22:24:38Z

playground/tsconfig.node.json

+    "target": "ES2022",
+    "lib": ["ES2023"],


ESNext for both?

corinagum · 2025-01-10T22:25:23Z

playground/tsconfig.app.json

+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],


ESNext? make sure all tsconfigs match

corinagum · 2025-01-10T22:27:23Z

playground/src/layout/DefaultLayout.tsx

+
+        {/* <!-- ===== Content Area Start ===== --> */}
+        <div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+          {/* <!-- ===== Header Start ===== --> */}


These comments are messy. Is Header ever going to be more than one line?

corinagum · 2025-01-10T22:28:45Z

playground/src/layout/DefaultLayout.tsx

+      {/* <!-- ===== Page Wrapper Start ===== --> */}
+      <div className="flex h-screen overflow-hidden">
+        {/* <!-- ===== Sidebar Start ===== --> */}
+        <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />


Sidebar seems unnecessary atm since it doesn't have anything. Title should be in main body.

corinagum · 2025-01-10T22:30:51Z

playground/src/components/Sidebar.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef } from 'react';


I don't think this is necessary since there's only one view.

corinagum · 2025-01-10T22:31:36Z

playground/src/components/PageTitle.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'


Also unnecessary since there's only one view.

corinagum · 2025-01-10T22:35:07Z

packages/memory-server/main.py

@@ -0,0 +1,17 @@
+import routes
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware


hmmmmmm fastapi is a very old package and not maintained. We should find a better solution for v next

corinagum · 2025-01-10T22:49:25Z

playground/src/components/Loader.tsx

+
+    return (
+      <div className={surroundingBoxStyle}>
+        <div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-teams border-t-transparent"></div>


wait, what's spinning?

corinagum · 2025-01-10T22:50:19Z

playground/src/components/Header.tsx

+          {/* <!-- Hamburger Toggle BTN --> */}
+          <button
+            aria-controls="sidebar"
+            onClick={(e) => {


refactor all functions outside of the jsx (use named functions)

corinagum · 2025-01-10T22:53:34Z

playground/src/components/Dialog.tsx

+import React from 'react';
+import { Memory } from '../types';
+
+interface DialogProps {


This is defined multiple times - put in types file?

corinagum · 2025-01-10T22:57:23Z

playground/src/pages/Memories.tsx

+                min={1}
+                defaultValue={5}
+                {...register("limit", { required: false, min: 1 })}
+                className="p-2 rounded-md bg-white border border-gray-300 rounded-lg border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-teams active:border-teams disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-teams"


Future TODO: make all classname strings variables and refactor into separate file. Exception could be components with 3 or fewer classes.

https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

corinagum · 2025-01-10T22:59:23Z

playground/src/pages/Memories.tsx

+  const ColumnTitle = (props: { title: string }) => {
+    const { title } = props;
+
+    return (
+      <div className="mb-1 text-gray-700 font-bold">
+        {title}
+      </div>
+    );
+  }
+
+  const CustomCell = (props: { content: string }) => {
+    const { content } = props;
+
+    return (
+      <div className="text-center">
+        { content }
+      </div>
+    );
+  }
+
+  const columns = [
+    {
+      name: <ColumnTitle title="ID" />,
+      selector: (row: Memory) => row.id,
+      grow: 0.5,
+      cell: (row: Memory) => <CustomCell content={row.id} />
+    },
+    {
+      name: <ColumnTitle title="Content" />,
+      selector: (row: Memory) => row.content,
+      grow: 1,
+    },
+    {
+      name: <ColumnTitle title="Created At" />,
+      selector: (row: Memory) => row.created_at,
+      grow: 0.5,
+    },
+    {
+      name: <ColumnTitle title="User Id" />,
+      selector: (row: Memory) => row.user_id,
+      grow: 0.5
+    },
+    {
+      name: <ColumnTitle title="Memory Type" />,
+      selector: (row: Memory) => row.memory_type,
+      grow: 0.5
+    },
+    {
+      name: <ColumnTitle title="Update At" />,
+      selector: (row: Memory) => row.updated_at ?? "-",
+      grow: 0.5,
+      cell: (row: Memory) => <CustomCell content={row.updated_at ?? "-"} />,
+      onClick: handleRowClick // Add onClick handler to rows
+    },
+  ];
+


Ideally defined in separate files

corinagum · 2025-01-10T23:06:56Z

playground/tailwind.config.js

+        65: '.65',
+      },
+      backgroundImage: {
+        video: "url('../images/video/video.png')",


what's this? Are all of the defined props in this file being used in the project?

corinagum · 2025-01-10T23:10:30Z

playground/package.json

+    "react-hook-form": "^7.54.2",
+    "react-router-dom": "^6.14.2"
+  },
+  "devDependencies": {


Probably want prettier & prettier tailwind plugin for class sorting

corinagum · 2025-01-10T23:19:49Z

playground/package.json

+  },
+  "dependencies": {
+    "lucide-react": "^0.344.0",
+    "openai": "^4.77.0",


Update version?

corinagum · 2025-01-10T23:24:08Z

playground/src/components/Header.tsx

+              e.stopPropagation();
+              props.setSidebarOpen(!props.sidebarOpen);
+            }}
+            className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"


z-index 🙁

corinagum · 2025-01-10T23:29:13Z

playground/src/components/Header.tsx

+  return (
+    <header className="sticky top-0 z-999 flex w-full bg-gray-3 dark:bg-boxdark dark:drop-shadow-none">
+      <div className="flex flex-grow items-center justify-between px-4 py-4  md:px-6 2xl:px-11">
+        <div className="flex items-center gap-2 sm:gap-4 lg:hidden">


Where does this button show up in the UI?

corinagum · 2025-01-10T23:31:26Z

playground/src/components/Sidebar.tsx

+          aria-expanded={sidebarOpen}
+          className="block lg:hidden"
+        >
+          <svg


export to assets jsx file with comment on what the svg looks like

corinagum

Cool feature! Seems like there's still bloat, like the sidebar?

singhk97 · 2025-01-13T17:34:40Z

Thanks for the feedback folks, I will be looking into this a bit later since it's lower priority.

singhk97 added 8 commits January 3, 2025 14:55

playground fe

ce3b97e

playground initial

4561299

cleanup

e3da521

fixes

1d4f628

lint fix

62dd17b

remove random logo

600d614

remove random logo ff

9811b25

remove memory utils

a76ae63

Copilot AI review requested due to automatic review settings January 8, 2025 20:38

singhk97 requested a review from a team as a code owner January 8, 2025 20:38

singhk97 requested review from pradeepananth and lilyydu January 8, 2025 20:38

Copilot AI reviewed Jan 8, 2025

View reviewed changes

Merge branch 'main' into kavin/playground

ec200b2

corinagum reviewed Jan 8, 2025

View reviewed changes

packages/memory-server/routes.py Show resolved Hide resolved

corinagum reviewed Jan 8, 2025

View reviewed changes

lilyydu reviewed Jan 9, 2025

View reviewed changes

heyitsaamir approved these changes Jan 9, 2025

View reviewed changes

corinagum reviewed Jan 10, 2025

View reviewed changes

playground/tsconfig.node.json

Comment on lines +3 to +4

"target": "ES2022",

"lib": ["ES2023"],

Copy link

Collaborator

corinagum Jan 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ESNext for both?

corinagum reviewed Jan 10, 2025

View reviewed changes

playground/package.json

},

"dependencies": {

"lucide-react": "^0.344.0",

"openai": "^4.77.0",

Copy link

Collaborator

corinagum Jan 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update version?

corinagum reviewed Jan 10, 2025

View reviewed changes

corinagum requested changes Jan 10, 2025

View reviewed changes

		@@ -0,0 +1,18 @@
		# Memory Server
		FastAPI wrapper around the memory module.

		@@ -0,0 +1,19 @@
		# Memory Playground UI

		A simple web application to easily view and interact with the memory module.

		@@ -14,13 +14,12 @@

		sys.path.append(os.path.join(os.path.dirname(__file__), ".."))

		from evals.helpers import Dataset, DatasetItem, load_dataset, setup_mlflow


		# Disclaimer

		Some components were taken from [TailAdmin](https://tailadmin.com/)'s free to use component package, which is under the MIT License.

Memory Playground #96

Are you sure you want to change the base?

Memory Playground #96

Conversation

singhk97 commented Jan 8, 2025 • edited Loading

Copilot AI left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

heyitsaamir left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

corinagum Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

corinagum left a comment

Choose a reason for hiding this comment

singhk97 commented Jan 13, 2025

singhk97 commented Jan 8, 2025 •

edited

Loading

corinagum Jan 10, 2025 •

edited

Loading