feat(nx-cloud): add styles and cleanup to ai feed container (#18593)

nx-dev/data-access-ai/src/lib/data-access-ai.ts

@@ -51,7 +51,7 @@ let totalTokensSoFar = 0;
 
 let supabaseClient: SupabaseClient<any, 'public', any>;
 
-export async function nxDevDataAccessAi(
+export async function queryAi(
   query: string,
   aiResponse?: string
 ): Promise<{
@@ -208,7 +208,11 @@ export async function nxDevDataAccessAi(
       throw new ApplicationError('Failed to generate completion', error);
     }
 
-    const message = getMessageFromResponse(response.data);
+    // Message asking to double-check
+    const callout: string =
+      '{% callout type="warning" title="Always double-check!" %}The results may not be accurate, so please always double check with our documentation.{% /callout %}\n';
+    // Append the warning message asking to double-check!
+    const message = [callout, getMessageFromResponse(response.data)].join('');
 
     const responseWithoutBadLinks = await sanitizeLinksInResponse(message);
 
@@ -248,13 +252,13 @@ export function getHistory(): ChatItem[] {
   return chatFullHistory;
 }
 
-export async function handleFeedback(feedback: {}): Promise<
+export async function sendFeedbackAnalytics(feedback: {}): Promise<
   PostgrestSingleResponse<null>
 > {
   return supabaseClient.from('feedback').insert(feedback);
 }
 
-export async function handleQueryReporting(queryInfo: {}) {
+export async function sendQueryAnalytics(queryInfo: {}) {
   const { error } = await supabaseClient.from('user_queries').insert(queryInfo);
 
   if (error) {

nx-dev/data-access-ai/src/lib/utils.ts

@@ -119,6 +119,18 @@ export class UserError extends ApplicationError {
   }
 }
 
+/**
+ * Initializes a chat session by generating the initial chat messages based on the given parameters.
+ *
+ * @param {ChatItem[]} chatFullHistory - The full chat history.
+ * @param {string} query - The user's query.
+ * @param {string} contextText - The context text or Nx Documentation.
+ * @param {string} prompt - The prompt message displayed to the user.
+ * @param {string} [aiResponse] - The AI assistant's response.
+ * @returns {Object} - An object containing the generated chat messages and updated chat history.
+ *   - chatMessages: An array of chat messages for the chat session.
+ *   - chatHistory: The updated chat history.
+ */
 export function initializeChat(
   chatFullHistory: ChatItem[],
   query: string,

nx-dev/feature-ai/src/index.ts

@@ -1,3 +1 @@
-// Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
-
-export * from './lib/feature-ai';
+export * from './lib/feed-container';

nx-dev/feature-ai/src/lib/error-message.tsx

@@ -0,0 +1,19 @@
+import { XCircleIcon } from '@heroicons/react/24/outline';
+
+export function ErrorMessage({ error }: { error: any }): JSX.Element {
+  return (
+    <div className="rounded-md bg-red-50 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-red-800">
+            Oopsies! I encountered an error
+          </h3>
+          <div className="mt-2 text-sm text-red-700">{error['message']}</div>
+        </div>
+      </div>
+    </div>
+  );
+}