Skip to main content
Glama
ui_components.cpython-313.pyc18 kB
� >�Qi�<��L�SrSSKrSSKJr SSKJr SSKJrJr "SS5r g)zF UI Components - Reusable Streamlit Components with Clean Light Theme �N)�Path)�datetime)�List�Dictc� �\rSrSrSr\S5r\S5r\S\S\ 4Sj5r \S\ S \ 4S j5r \S \\4S j5r\S \ S\ 4Sj5r\S\\4Sj5r\S5r\S\ S\\4Sj5r\S5rSrg)� UIComponents� z1Reusable UI components for Streamlit application.c�.�[R"SSS9 g)z0Inject custom CSS for clean, simple light theme.a!" <style> /* ===== CLEAN LIGHT THEME ===== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* Main background - Simple white */ html, body, [data-testid="stApp"] { background: #ffffff; color: #1a1a1a !important; } /* Sidebar - Light gray */ [data-testid="stSidebar"] { background: #f8f9fa; border-right: 2px solid #e9ecef; } [data-testid="stSidebar"] [data-testid="stMarkdownContainer"] { color: #1a1a1a !important; } /* Main content area */ .main .block-container { padding-top: 2rem; padding-bottom: 2rem; background: #ffffff; } /* Headers */ .main-header { font-size: 2.5rem; font-weight: 700; color: #1a1a1a; text-align: center; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .sub-header { font-size: 1.1rem; color: #666666; text-align: center; margin-bottom: 2rem; font-weight: 400; } /* Chat messages - Simple boxes with clear colors */ .chat-user { background: #e3f2fd; color: #1a1a1a; padding: 1rem 1.25rem; border-radius: 8px; margin: 0.75rem 0; border-left: 4px solid #2196f3; } .chat-assistant { background: #f1f8e9; color: #1a1a1a; padding: 1rem 1.25rem; border-radius: 8px; margin: 0.75rem 0; border-left: 4px solid #4caf50; } /* Tool calls */ .tool-call { background: #fff9e6; color: #1a1a1a; padding: 0.75rem 1rem; border-radius: 6px; margin: 0.5rem 0; font-family: 'SF Mono', 'Monaco', monospace; font-size: 0.9rem; border-left: 3px solid #ffa726; } /* Buttons - Simple and clean */ .stButton > button { border-radius: 6px; font-weight: 500; border: 2px solid #e0e0e0; background: #ffffff; color: #1a1a1a; transition: all 0.2s ease; } .stButton > button:hover { border-color: #2196f3; background: #f5f5f5; } /* Input fields - High contrast */ .stTextInput > div > div > input, .stTextArea > div > div > textarea { background-color: #ffffff !important; color: #1a1a1a !important; border: 2px solid #d0d0d0 !important; border-radius: 6px !important; padding: 0.75rem !important; } .stTextInput > div > div > input:focus, .stTextArea > div > div > textarea:focus { border-color: #2196f3 !important; outline: none !important; } /* Tabs - Clean separation */ .stTabs [data-baseweb="tab-list"] { gap: 0.5rem; background: transparent; border-bottom: 2px solid #e0e0e0; } .stTabs [data-baseweb="tab"] { border-radius: 6px 6px 0 0; background: #f5f5f5; border: 2px solid #e0e0e0; border-bottom: none; padding: 0.5rem 1.5rem; font-weight: 500; color: #666666; } .stTabs [aria-selected="true"] { background: #ffffff; color: #1a1a1a !important; border-color: #e0e0e0; border-bottom: 2px solid #ffffff; margin-bottom: -2px; } /* Expanders - Simple boxes */ .streamlit-expanderHeader { background: #f8f9fa; border-radius: 6px; border: 2px solid #e0e0e0; font-weight: 500; color: #1a1a1a; } .streamlit-expanderHeader:hover { background: #f0f0f0; } /* Status indicators - Clear and visible */ .stSuccess { background: #e8f5e9; border-left: 4px solid #4caf50; border-radius: 6px; color: #1b5e20; padding: 1rem; } .stError { background: #ffebee; border-left: 4px solid #f44336; border-radius: 6px; color: #b71c1c; padding: 1rem; } .stWarning { background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 6px; color: #e65100; padding: 1rem; } .stInfo { background: #e3f2fd; border-left: 4px solid #2196f3; border-radius: 6px; color: #0d47a1; padding: 1rem; } /* Dataframes */ .stDataFrame { border-radius: 6px; overflow: hidden; border: 2px solid #e0e0e0; } .stDataFrame [data-testid="stDataFrameResizable"] { background-color: #ffffff !important; } /* Metrics */ [data-testid="stMetricValue"] { color: #1a1a1a !important; font-weight: 600; font-size: 1.5rem !important; } [data-testid="stMetricLabel"] { color: #666666 !important; font-weight: 500; } /* Dividers */ hr { margin: 1.5rem 0; border: none; height: 2px; background: #e0e0e0; } /* Code blocks */ .stCodeBlock { border-radius: 6px; border: 2px solid #e0e0e0; background: #f8f9fa; } code { background: #f0f0f0 !important; color: #1a1a1a !important; border-radius: 4px; padding: 0.2rem 0.4rem; font-weight: 500; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #f5f5f5; } ::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #9e9e9e; } /* Selectbox */ .stSelectbox > div > div { background-color: #ffffff !important; border: 2px solid #d0d0d0 !important; border-radius: 6px !important; color: #1a1a1a !important; } /* Better text contrast */ p, span, div { color: #1a1a1a !important; } /* Sidebar text */ [data-testid="stSidebar"] p, [data-testid="stSidebar"] span, [data-testid="stSidebar"] div { color: #1a1a1a !important; } /* Headers in sidebar */ [data-testid="stSidebar"] h1, [data-testid="stSidebar"] h2, [data-testid="stSidebar"] h3 { color: #1a1a1a !important; } /* Make captions more visible */ .caption, [data-testid="stCaptionContainer"] { color: #666666 !important; font-size: 0.9rem; } </style> T��unsafe_allow_htmlN��st�markdown���<C:\Users\CHAKOR\filesystem-mcp-project\host\ui_components.py�render_custom_css�UIComponents.render_custom_css s�� � � �Y �r $�sY %rc�X�[R"SSS9 [R"SSS9 g)zRender application header.u?<div class="main-header">🗂️ MCP Filesystem Assistant</div>Tr zT<div class="sub-header">AI-Powered File Management with Model Context Protocol</div>Nr rrr� render_header�UIComponents.render_header+s+�� � � �U�im�n� � � �j�C� Dr� is_connected� server_urlc���U(a1[R"S5 [R"SUS35 g[R"S5 [R"S5 g)z} Render server connection status. Args: is_connected: Whether server is connected server_url: Server URL to display u✅ MCP Server Connectedu📡 **Server:** `�`u❌ MCP Server DisconnectedzH**Start the server:** ```bash python server/filesystem_mcp_server.py ```N)r�success�info�error�warning)rrs r�render_connection_status�%UIComponents.render_connection_status1sH�� � �J�J�1� 2� �G�G�(�� �A�6� 7� �H�H�2� 3� �J�J�� r�workspace_path� file_countc�f�[R"SUS35 [R"SU5 g)z� Render workspace information. Args: workspace_path: Path to workspace directory file_count: Number of files in workspace u**📁 Location:** `ru📊 Files/FoldersN)rr�metric)r"r#s r�render_workspace_info�"UIComponents.render_workspace_infoFs*�� ���'��'7�q�9�:� � � �&� �3r�toolsc ��[R"S[U5S35 [R"SSS9 [ US5Huup[R "SUSUS S35 [R "S URS S 535 U[U5:dM_[R "S 5 Mw SSS5 g!,(df  g=f)zF Render available tools list. Args: tools: List of tool metadata u✨ **z tools loaded**u🔍 View All ToolsF��expanded�z**�. �nameu📝 � descriptionzNo descriptionz---N)rr�len�expander� enumerater�caption�get)r(�i�tools r�render_tools_list�UIComponents.render_tools_listRs��� ���&��U�� �O�4�5� �[�[�.�� ?�$�U�A�.���� � �b���2�d�6�l�^�2�6�7�� � �U�4�8�8�M�;K�#L�"M�N�O��s�5�z�>��K�K��&� /�@� ?� ?�s�A(C�%C� C�role�contentc��US:Xa[R"SUS3SS9 gUS:Xa[R"SUS3SS9 gg) zd Render a chat message. Args: role: Message role (user/assistant) content: Message content �useru.<div class="chat-user">👤 <b>You</b><br><br>z</div>Tr � assistantu9<div class="chat-assistant">🤖 <b>Assistant</b><br><br>Nr )r9r:s r�render_chat_message� UIComponents.render_chat_messagebsQ�� �6�>� �K�K�@�� ��P�"&� ��[� � �K�K�K�G�9�TZ�[�"&� �!r� tool_callsc �~�U(a�[R"S[U5S3SS9 [US5HcupSR USR 5VVs/sH up4USU3PM snn5n[R "S US US S US 3SS9 Me SSS5 ggs snnf!,(df  g=f)zR Render tool calls in an expander. Args: tool_calls: List of tool calls made u🔧 Tools Used (�)Tr*r,z, � arguments�=u<div class="tool-call">🛠️ r-r.�(z)</div>r N)rr1r0r2�join�itemsr)r@r5r6�k�v�args_strs r�render_tool_calls�UIComponents.render_tool_callsvs��� ����0��Z��0A��C�d�S�(��Q�7�G�A�#�y�y��k�AR�AX�AX�AZ�)[�AZ���Q�C�q���*�AZ�)[�\�H��K�K�9�!��B�t�F�|�n�A�h�Z�W^�_�*.�� 8�T�S� ��*\�T�S�s�3B.�B(�0.B.�(B.�. B<c���[R"S5 [R"S5upnSSSS.nSnU [R"SS S S 9(aUSnSSS5 U [R"S S S S 9(aUS nSSS5 U [R"SS SS 9(aUSnSSS5 U$!,(df  Nf=f!,(df  NL=f!,(df  U$=f)zRender example prompt buttons.u### 💡 Try these examples:�zList all files in the workspacezRead the contents of notes.txtz5Create a file called hello.txt with 'Hello from MCP!')�📋 List files�📝 Read notes�📄 Create fileNrOT�ex1)�use_container_width�keyrP�ex2rQ�ex3)rr�columns�button)�col1�col2�col3�examples�clickeds r�render_example_prompts�#UIComponents.render_example_prompts�s��� � � �2�3��:�:�a�=���D� A�?� W� �� �� ��y�y�*��%�P�"�#4�5�����y�y�*��%�P�"�#4�5�����y�y�+��5�Q�"�#5�6������T���T���T���s#�!B;�%!C �!C�; C � C� C,�returnc ��/nUR5H�nUR5nURURUR 5(aSOSUR S:aUR SS3OUR S- SS3[ R"UR5RS5S .5 M� [US S 9$![a /s$f=f) z� Get list of files in workspace. Args: workspace_path: Path to workspace directory Returns: List of file metadata dictionaries �📂u📄i�,z bytesz.1fz KBz%Y-%m-%d %H:%M)r.�type�size�modifiedc��USS:gUS4$)Nrdrbr.r)�xs r�<lambda>�3UIComponents.list_workspace_files.<locals>.<lambda>�s���&� �V�0C�Q�v�Y�/Or)rT) �iterdir�stat�appendr.�is_dir�st_sizer� fromtimestamp�st_mtime�strftime�sorted� Exception)r"�files�itemrls r�list_workspace_files�!UIComponents.list_workspace_files�s��� ��E�&�.�.�0���y�y�{��� � � �I�I�&*�k�k�m�m�F��9=����9L�t�|�|�A�.�f�5�UY�Ua�Ua�bf�Uf�gj�Tk�kn�Ro� (� 6� 6�t�}�}� E� N� N�O_� `� ��1��%�%O�P� P��� ��I� �s�CC � C�Cc�X�[R"5 [R"SSS9 g)zRender application footer.u <div style="text-align: center; color: #666666; padding: 1.5rem; font-size: 0.9rem;"> <p style="margin: 0.5rem 0;"> Built with ❤️ using <b style="color: #1a1a1a;">FastMCP</b>, <b style="color: #1a1a1a;">OpenAI</b>, and <b style="color: #1a1a1a;">Streamlit</b> </p> <p style="margin: 0.5rem 0; font-size: 0.85rem;"> 🔒 All operations are securely sandboxed to the workspace directory </p> </div> Tr N)r�dividerrrrr� render_footer�UIComponents.render_footer�s#�� � � � � � � �  � $� %rrN)�__name__� __module__� __qualname__�__firstlineno__�__doc__� staticmethodrr�bool�strr r�intr&rrr7r>rKr^rwr{�__static_attributes__rrrrr s"��;��[%��[%�z�D��D� ��t������(� 4�d� 4�� 4�� 4�� '��d�� '�� '���#������&��d�4�j���� ����0��T��d�4�j����0�%��%rr) r�� streamlitr�pathlibrr�typingrrrrrr�<module>r�s$�������~%�~%r

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/chakorabdellatif/filesystem-mcp-with-FastMCP-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server