WIP

Author: sdzh-atlassian

src/atlclients/issueBuilder.ts

@@ -16,25 +16,38 @@ export type SuggestedIssuesResponse = {
     suggestedIssues: SuggestedIssue[];
 };
 
-export const findCloudSiteWithApiKey = async (): Promise<DetailedSiteInfo | null> => {
-    const sites = await Promise.all(
-        Container.siteManager.getSitesAvailable(ProductJira).map(async (site) => {
-            if (!site.host.endsWith('.atlassian.net')) {
-                return null;
-            }
-
-            const authInfo = await Container.credentialManager.getAuthInfo(site);
-            if (!authInfo || !isBasicAuthInfo(authInfo)) {
-                return null;
-            }
-
-            return site;
-        }),
-    ).then((results) => results.filter(Boolean));
+type SiteId = string;
+
+export const isSiteCloudWithApiKey = async (site?: DetailedSiteInfo | SiteId): Promise<boolean> => {
+    const siteToCheck = typeof site === 'string' ? Container.siteManager.getSiteForId(ProductJira, site) : site;
+
+    if (!siteToCheck || !siteToCheck.host) {
+        return false;
+    }
+
+    if (!siteToCheck.host.endsWith('.atlassian.net')) {
+        return false;
+    }
+
+    const authInfo = await Container.credentialManager.getAuthInfo(siteToCheck);
+    if (!authInfo || !isBasicAuthInfo(authInfo)) {
+        return false;
+    }
+
+    return true;
+};
+
+export const findCloudSiteWithApiKey = async (): Promise<DetailedSiteInfo | undefined> => {
+    const sites = (
+        await Promise.all(
+            Container.siteManager
+                .getSitesAvailable(ProductJira)
+                .map(async (x) => ((await isSiteCloudWithApiKey(x)) ? x : undefined)),
+        )
+    ).filter((x) => x !== undefined) as DetailedSiteInfo[];
 
     // Any site is fine, just need an API key
-    const site = sites[0];
-    return site;
+    return sites.length > 0 ? sites[0] : undefined;
 };
 
 export const fetchIssueSuggestions = async (prompt: string): Promise<SuggestedIssuesResponse> => {
@@ -53,13 +66,17 @@ export const fetchIssueSuggestions = async (prompt: string): Promise<SuggestedIs
         }
 
         const response = await axiosInstance.post(
-            `https://${site.host}/gateway/api/assist/chat/v1/invoke_agent`,
+            `https://${site.host}/gateway/api/assist/api/ai/v2/ai-feature/jira/issue/source-type/conversation/suggestions`,
             {
-                recipient_agent_named_id: 'ai_issue_create_agent',
-                agent_input_context: {
-                    application: 'Slack',
+                ai_feature_input: {
+                    source: 'SLACK',
+                    locale: 'en-US',
                     context: {
-                        primary_message: { text: prompt },
+                        primary_message: {
+                            text: prompt,
+                            sender: '',
+                            timestamp: '',
+                        },
                     },
                     suggested_issues_config: {
                         max_issues: 1,
@@ -92,7 +109,7 @@ export const fetchIssueSuggestions = async (prompt: string): Promise<SuggestedIs
                 },
             },
         );
-        const content = JSON.parse(response.data.message.content);
+        const content = response.data.ai_feature_output;
 
         const responseData: SuggestedIssuesResponse = {
             suggestedIssues: content.suggested_issues.map((issue: any) => ({

src/commands/jira/createIssue.ts

@@ -49,7 +49,7 @@ export async function createIssue(data: Uri | TodoIssueData | undefined, source?
             const suggestionManager = new IssueSuggestionManager(settings);
 
             await suggestionManager.generate(todoData).then(async (suggestion) => {
-                await Container.createIssueWebview.forceUpdateFields({
+                await Container.createIssueWebview.fastUpdateFields({
                     summary: suggestion.summary,
                     description: suggestion.description,
                 });

src/commands/jira/issueSuggestionManager.ts

@@ -1,13 +1,17 @@
 import { FeatureFlagClient, Features } from 'src/util/featureFlags';
 import { window, workspace } from 'vscode';
 
-import { fetchIssueSuggestions, findCloudSiteWithApiKey } from '../../atlclients/issueBuilder';
+import { fetchIssueSuggestions, isSiteCloudWithApiKey } from '../../atlclients/issueBuilder';
 import { IssueSuggestionContextLevel, IssueSuggestionSettings, SimplifiedTodoIssueData } from '../../config/model';
 
 export class IssueSuggestionManager {
     static getSuggestionEnabled(): boolean {
+        if (!FeatureFlagClient.checkGate(Features.EnableAiSuggestions)) {
+            return false;
+        }
+
         const config = workspace.getConfiguration('atlascode.issueSuggestion').get<boolean>('enabled');
-        return config === true; // (as opposed to undefined)
+        return Boolean(config);
     }
 
     static getSuggestionContextLevel(): IssueSuggestionContextLevel {
@@ -19,7 +23,13 @@ export class IssueSuggestionManager {
     }
 
     static async getSuggestionAvailable(): Promise<boolean> {
-        return FeatureFlagClient.checkGate(Features.EnableAiSuggestions) && (await findCloudSiteWithApiKey()) !== null;
+        const isFeatureEnabled = FeatureFlagClient.checkGate(Features.EnableAiSuggestions);
+
+        const selectedSite = workspace
+            .getConfiguration('atlascode')
+            .get<string>('jira.lastCreateSiteAndProject.siteId');
+
+        return Boolean(isFeatureEnabled && (await isSiteCloudWithApiKey(selectedSite)));
     }
 
     static async buildSettings(): Promise<IssueSuggestionSettings> {
@@ -69,6 +79,7 @@ export class IssueSuggestionManager {
                     error: 'Unable to fetch issue suggestions. Sorry!',
                 };
             }
+
             return {
                 summary: issue.fieldValues.summary,
                 description: issue.fieldValues.description,

src/webviews/components/App.css

@@ -1042,7 +1042,14 @@ div[role='dialog'],
     display: inline-block;
 }
 
+.ac-form-separator {
+    border: none;
+    border-top: 1px solid var(--vscode-settings-textInputBorder);
+    margin: 1rem 0;
+}
+
 .ac-inputField,
+.ac-inputField:disabled,
 .ac-inputField-inline,
 .ac-textarea {
     background: var(--vscode-input-background) !important;

src/webviews/components/aiCreateIssue/AISuggestionHeader.tsx

@@ -1,18 +1,12 @@
 import Checkbox from '@atlaskit/checkbox';
 import { HelperMessage } from '@atlaskit/form';
-import Select from '@atlaskit/select';
 import React, { useEffect, useState } from 'react';
 import { IssueSuggestionContextLevel, IssueSuggestionSettings } from 'src/config/model';
 
 interface VsCodeApi {
     postMessage(msg: {}): void;
 }
 
-const contextLevelNames = new Map<string, string>([
-    [IssueSuggestionContextLevel.CodeContext, 'Code context (Recommended)'],
-    [IssueSuggestionContextLevel.TodoOnly, 'TODO text only'],
-]);
-
 const AISuggestionHeader: React.FC<{
     vscodeApi: VsCodeApi;
 }> = ({ vscodeApi }) => {
@@ -25,7 +19,6 @@ const AISuggestionHeader: React.FC<{
     const { isAvailable, isEnabled, level } = suggestionSettings;
 
     const [todoData, setTodoData] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         if (!vscodeApi) {
@@ -48,6 +41,9 @@ const AISuggestionHeader: React.FC<{
         if (!todoData) {
             return;
         }
+        window.postMessage({
+            type: 'generateIssueSuggestions',
+        });
         vscodeApi.postMessage({
             action: 'generateIssueSuggestions',
             todoData,
@@ -67,7 +63,6 @@ const AISuggestionHeader: React.FC<{
         };
         setSuggestionSettings(newState);
         updateIdeSettings(newState);
-        setIsLoading(true);
         generateIssueSuggestions({ ...newState });
 
         // update the footer
@@ -78,25 +73,11 @@ const AISuggestionHeader: React.FC<{
         });
     };
 
-    const handleSelectChange = (e: any) => {
-        const newState = {
-            isAvailable: isAvailable,
-            isEnabled: isEnabled,
-            level: e.value,
-        };
-        setSuggestionSettings(newState);
-        updateIdeSettings(newState);
-        setIsLoading(true);
-        generateIssueSuggestions(newState);
-    };
-
     window.addEventListener('message', (event) => {
         const message = event.data;
         if (message.type === 'updateAiSettings') {
             setSuggestionSettings(message.newState);
             setTodoData(message.todoData);
-        } else if (message.type === 'update') {
-            setIsLoading(false);
         } else if (message.type === 'updateFeatureFlag') {
             console.log('updateFeatureFlag', message.value);
             setIsFeatureFlagEnabled(message.value);
@@ -109,40 +90,27 @@ const AISuggestionHeader: React.FC<{
 
     return isAvailable ? (
         <div>
-            <Checkbox label="Use AI to generate issue?" isChecked={isEnabled} onChange={handleCheckboxChange} />
-            {isEnabled && (
-                <div
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '10px',
-                        justifyContent: 'space-between',
-                    }}
-                >
-                    <div style={{ flex: '1' }}>
-                        <HelperMessage>
-                            Please select the level of details you'd like to be used for the issue generation.
-                        </HelperMessage>
-                    </div>
-                    <div style={{ flex: '1' }}>
-                        <Select
-                            className="ac-form-select-container"
-                            classNamePrefix="ac-form-select"
-                            isSearchable={false}
-                            isLoading={isLoading}
-                            value={{
-                                label: contextLevelNames.get(level),
-                                value: level,
-                            }}
-                            options={Array.from(contextLevelNames.entries()).map(([value, label]) => ({
-                                value,
-                                label,
-                            }))}
-                            onChange={handleSelectChange}
-                        />
-                    </div>
-                </div>
-            )}
+            <hr className="ac-form-separator" />
+            <Checkbox label="Use AI to create issue" isChecked={isEnabled} onChange={handleCheckboxChange} />
+            <HelperMessage>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                    <span>AI will analyze your TODO and code context to suggest issue titles and descriptions.</span>
+                    <span title="AI suggestions use your code and TODO comments to generate issue details.">
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            aria-label="Info"
+                            style={{ verticalAlign: 'middle', cursor: 'pointer' }}
+                        >
+                            <circle cx="8" cy="8" r="7" stroke="#6B778C" strokeWidth="1.5" fill="#DEEBFF" />
+                            <rect x="7.25" y="7" width="1.5" height="4" rx="0.75" fill="#6B778C" />
+                            <rect x="7.25" y="4" width="1.5" height="1.5" rx="0.75" fill="#6B778C" />
+                        </svg>
+                    </span>
+                </span>
+            </HelperMessage>
         </div>
     ) : (
         <HelperMessage>

src/webviews/components/editor/Editor.tsx

@@ -170,6 +170,10 @@ export function useEditor<T extends UserType>(props: {
     const view = useRef<EditorView | null>(null);
     const [content, setContent] = useState(props.value || '');
 
+    if (props.value !== content) {
+        setContent(props.value);
+    }
+
     // Prevents unnecessary calls to fetchUsers
     const debouncedFetch = props.fetchUsers && debounce(props.fetchUsers, 1500, { leading: true, maxWait: 1 });
 
@@ -191,6 +195,7 @@ export function useEditor<T extends UserType>(props: {
             return;
         }
         if (props.enabled) {
+            view.current.state.doc = mdParser.parse(content);
             const slice = view.current.state.doc.slice(0);
             const tr = view.current.state.tr.replaceWith(0, slice?.size || 0, mdParser.parse(content));
             view.current.dispatch(tr);